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محتويات الوحدة 

- مقدمة. 

- مفهوم خدمة الويب Web‏ 
- نشأة وتطور خدمة الويب اعلالا: 
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دعم الرسوميات. 

تصميم الصفحات المتنوعة. 
- خاتمة. 


الأهداف التعليمية 
بعد دراسة هذه الوحدة التعليمية يجب أن يكون الطالب قادراً على أن: 
1- يشرح مفهوم الويب. 
2- يعدد تعريفات الويب (اعلالا. 
3- يذكر مميزات وخصائص خدمة الويب “Web‏ 
4 يشرح خدمة الويب 2.0 علالا. 
5- يحدد خصائص خدمة الويب 2.0 Web‏ 
6- يشرح عيوب 2.0 لاعلالا. 
7- يشرح ‘Web 3.0 40rd‏ 


8 يعدد مميزات الويب 3.0 (اعلالا. 


الكلمات المفتاحية: 

الإنترنت - خدمة الويب ۷/۷۷ - ويب 2.0 - ويب 3.0 - الوسائط المتعددة - النص المتشعب - 
الروابط - برامج التصفح - المستعرضات — Mosaic - Mozilla Firefox- Internet Explorer‏ - 
عنوان الموقع - مجال الموقع - برتوكول نقل الملفات 215 - بروتوكول نقل ملفات النص الفائق 
5 - صفحات الويب الساكنة - صفحات الويب التفاعلية -اللاخطية - التفاعل - الرسوميات. 


أولاً: مقدمة 


wori (we 


aå‏ خدمة الويب ١/6‏ 1/106 0710 :/الالالالالا من أهم التطورات التي حدثت في الإنترنت» وقد 
اعتبرها البعض الثورة الثانية في ظهور الإنترنت» حيث إنها ليست سوى إحدى الخدمات المتاحة على 
الإنترنت» وهي التي أعطت للإنترنت الصبغة (الشعبية) التي حولتها من جهاز بيد الخاصة من الباحثين 
العلميين في مختلف التخصصات إلى وسيلة اتصال وإعلام جماهيرية بيد الملايين من عامة الشعوب في 
مختلف أنحاء العالم. 

وفي هذه الوحدة سيتم التعرض لنشأة ظهور هذه الخدمة» ومفهومها وتعريفهاء والخصائص والميزات التي 
تتمتع بهاء والتي أضفتها على شبكة الإنترنت» كما سيتم التعرض إلى خدمة الويب 2.0 iasg Web‏ 
الويب 3.0 Web‏ وهما الخدمتان اللتان تمثلان تطوراً في خدمة الويب» والتي أوصلت المستخدمين› 
إلى عالم الوسائل التفاعلية المتمثلة في المدونات ومواقع التواصل الاجتماعية. 


ثانياً: مفهوم الويب 

كانت الخدمات التي تقدّم عبر الإنترنت» قبل ظهور 
الويب» حكراً على الجامعيين والباحثين في المؤسسات 
العلمية» ومطوري أنظمة الكمبيوترء فكان هؤلاء يتبادلون 
المعلومات المفهرسة التي تساعدهم في إنجاز أعمالهم 
البحثية والعلمية» وتمكّنهم من إعداد محاضراتهم التي 
يقدمونها للطلاب في الجامعات وغيرهاء كما تمكنهم من 
إرسال الرسائل الإلكترونية واستقبالهاء هذا إضافة إلى 
استخدامها من قبل الباحثين في الشؤون العسكرية 
والعاملين في المؤسسات العسكرية» لكن هذا الوضع 





ومع ظهور الويب اختلف بشكل كبيرء فأصبحت الإنترنت في أيدي العامة من الأفراد» من خلالها 
يتبادلون ويحصلون على الكثير من المعلومات» ويرسلون الرسائل الإلكترونية ويستقبلونهاء ويتصفحون 
العديد من المواقع الإعلامية وغير الإعلامية» وأصبحت هذه الوسيلة» ليست فقط الوسيلة الأهم في 
الحصول على المعلومات العامة» بل واحدة من وسائل الاتصال والإعلام الجماهيرية التي يستخدمها 
الملايين من الأفراد الذين استبدلوا بها وسائل الاتصال والإعلام التقليدية. 

وتستخدم الويب أسلوب النص الفائق أو المتشعب 
أ“«©1611! لنشر النصوصء ويتيح هذا النظام البحث في 
وثائق معقدة داخل ASLAN‏ وتتابع روابط النص الفائق 
(الويب) في تتبع الأفكار والموضوعات من صفحة ويب 
Webpage‏ 





إلى صفحة أخرى بغض النظر عما إذا كانت هذه الصفحة مخزنة في الحاسب نفسه والمسمى خادم 
الويب «Web Server‏ أو موزعة على خادمات أخرى منتشرة في أنحاء العالم» لذا فهي تسمح للمستخدم 
بالانتقال بسرعة من مصدر معلومات إلى آخر بمجرد الضغط على المصدر. 

فالويب Web‏ )13 طريقة لتنظيم المعلومات بحيث يستطيع أي كمبيوتر في العالم أن يعمل وفق قواعد 
معينة للوصول إلى تلك المعلومات» وشمى القواعد التي تحدد كيفية الوصول إلى الملفات ونقلها عبر 
الويب بروتوكولات نقل .Hypertext Transfer Protocol inesi agail‏ 


دور العالم الفيزيائي البريطاني ©©5617©615-1 à Tim‏ تطوير خدمة الويب: 


قد طور خدمة الويب في عام 1991 العالم الفيزيائي 
البريطاني Tim Berners—Lee‏ في المعمل 
Cade Gd Gell olga eas‏ يديه كن | 
WS Gacy, Clases) hy! talks‏ ختاصيو 






رئيسية: 
1- طريقة لإعطاء كل موقع عنواناً فريداً. 

2- بروتوكول لنقل تلك البيانات المرتبطة بعضها مع بعض. 
3-لغة لترميز المعلومات. 


ونظراً للحاجة إلى تنسيق أساسي لأي مستند يميزه عن غيره من أجل تمرير المعلومات المرسلة 
والمستقبلة بين أنظمة الحاسبات» فقد طور Berners‏ 115 لغة ترميز النصوص التشعبية HTML:‏ 
Hypertext Markup Language‏ بالاعتماد على لغة سابقة هي لغة الترميز المعممة والقياسية 

«SGML :Standard Generalized Markup Language‏ وتتميز )42 HTML‏ بالبساطة 
والشمولية وعدم الحاجة إلى الترقية» Tim Berners cj iea‏ أضاف في سعيه لتنظيم نمو الويب 
بديهية أخيرة بخصوص الإصدارات الجديدة» وهي أنه يجب ألا تلغى الإصدارات القديمة من اللغة» وبهذه 


الطريقة فإن نمو الويب سيتطلب فقط إضافات جديدة على الإضدارات القديمة: 


ثالثاً: تعريف الويب Web‏ 
اختلفت تعريفات الويب 5©/ل/ا تبعاً لاختصاصات الباحثين الذين استخدموا ودرسوا هذه الخدمة: 

٠‏ فذوو الخلفيات التقنية من مطوري الشبكات ومصممي المواقع والمبرمجين يركزون في تعريفهم 
لها على الوصف التقني» كطبيعة اللغة المستخدمة في البرمجة والمستخدمة في كتابة الوثائق 
والبروتوكولات التي تنظم التواصل. 

٠‏ بينما يركز الإعلاميون على المضمون والميزات والخصائص التي تحملهاء ومن هذه التعريفات 
ما يلي: 

1-الويب ۷60 "هي مجموعة من الملفات المرتبطة فيما بينهاء والمتضمنة لملف افتتاحي يسمى 
الصفحة الرئيسية ۴298 «Home‏ والتي يمكن الدخول من خلالها إلى بقية الوثائق والصفحات 
المتضمنة في الموقع» ويتم الوصول إلى الموقع من خلال كتابة اسم الموقع'. 

2- وفي تعريف آخر للويب iaia f ak eÍ Web‏ أو مجموعة ملفات يتم تخزينها في 
حاسوب خادم 56۲۷8۲ يمكن الدخول إليها عبر شبكة الإنترنت» ولكل موقع صفحة رئيسية 
تُصمم غالباً لكي تكون الملف الأول الذي يزوره المتصفح ليأخذ فكرة عامة عن مضامين الموقع» 
تتضمن الملفات الموجودة بالموقع وصلات نصية أو رسومية يتم النقر عليها باستخدام جهاز 
مدخلات مثل الفأرة قصد الانتقال من ملف إلى آخر داخل الموقع أو خارجه". 

3- ويعرتف حسني محمد نصر الويب على أنه: "نظام من خادمات الكومبيوتر يدعم الوثائق 
المكتوبة بلغة النص الفائق» ويقوم بالربط بين الوثائق بعضها البعض سواء كانت وثائق نصية أم 
غرافيكية أم صوتية أم ملفات فيديو» وهو مجموعة من المعلومات المترابطة والمخزنة في أجهزة 
كومبيوتر عديدة في جميع أنحاء العالم يتم تسليمها عبر الإنترنت بشكل صفحة أو صفحات 
gilly Web page oydi iaia lle Gih;‏ قد يحتوي نصاً أو يشير إلى ملفات أخرى. 
وهذه الملفات قد تحوي صوراً أو لقطات فيديو أو مقاطع سمعية". 

4- ويقول عباس مصطفى: 'لقد نشأت الويب على الإنترنت وهي تستفيد من آليات الإنترنت 
وأجهزتها وبنيتها التحتية التي هي مجموعة من الشبكات والملقمات والأجهزة في جميع أنحاء 
العالم» والعناصر الأساسية للإنترنت هي الحواسيب حول العالم» بينما الويب هي مجموعة أدوات 


غير مادية تسمح بتبادل المعلومات بين المستخدمين أينما كانوا". 


- ومن وجهة نظر الإعلاميين فإن الويب ۷٥۴6‏ هي 'رسائل تواصلية مخزنة في جهاز كمبيوتر 


(خادم) يتم الوصول إليها بالدخول إلى الإنترنت» باستخدام أحد متصفحاتهاء ويتخذ موقع الويب 
شكل الصفحات أو الوثائق المكتوبة بلغة النص الفائق التشعبي» ويتخذ من الصفحة الرئيسية 
واجهة له» ويتم التنقل بينها بواسطة وصلات عادية أو تشعبية". 

وتقدّم الرسائل التواصلية بشكل منفرد (نص أو صورة أو صوت أو فيديو)» أو وسائط متعددة 
Multimedia‏ وغالباً ما تقدم مواقع الويب خدمات تهدف إلى تعزيز التواصل والتفاعل مع 
المتلقي» لذلك يمكن التعامل مع هذه المواقع على أنها وسائل اتصال إلكترونية جماهيرية تتكامل 


فيها الرسالة شكلاآً ومضموناً مع الوسيلة والمتلقي. 


|: مميزات وخصائص خدمة Web cul‏ 


a 
4 


تتمتع الويب بسمات تميزها عن بقية خدمات 
الإنترنت الأخرى» وهي السمات والخصائص 
التي أصبحت سمة خاصة بالإنترنت نفسهاء 
وبكل التطبيقات التي ظهرت عليهاء ومن هذه 
الخصائص: 





اللاخطية: بمعنى أن صفحات الويب وملفاتها 

To and from 
go t Web sites جمد‎ a ترتبط بد کل مترابط وه عب» ویست‎ 
oher Web sies المستخدمين الوصول إلى كل صفحة من‎ 









To and from 
other Web sites 


To and from 
other Web 
sites 


تسمح لهم باختيار المسار الذي يريدونه. To and from‏ 


other Web sites 
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ب-التفاعلية: تُعد خدمة الويب Gulu! Web‏ في إنشاء المواقع الإلكترونية الداعية إلى المشاركة 

والتفاعل على الويب ۷6ء حيث ستخدم مع أدوات تفاعلية أخرى؛ مثل: البريد الإلكتروني» 

وغرف المحادثة والنقاش» أو المؤتمرات عن بعد» أو مواقع التواصل الاجتماعي» وغيرها من 

أدوات الاتصال والتفاعل التي تجعل الاتصال بمالك الموقع أو إعطاء رأيه حول منتج معين أو 
الاستفسار عن معلومات معينة ممكنة ومتاحة: وطبقاً لوجود التفاعل على صفحات الويب أو 

غيابه» يمكن تقسيمها إلى نوعين: 

1. صفحات الويب الساكنة 3065 «اعلالا 543616: وهي صفحات يغيب التفاعل مع 
محتواهاء ويُكتفى بقراءة الصفحة لعدم وجود أدوات detall‏ مثل الاكتفاء بقراءة محتوى 
الموضوع الذي يتم عرضه بوسائل متعددة غير النشطةء أو صفحة من الكتب» أو المراجع 
أو المقالات والمراجع» وغيرها من أشكال 
المحتوى التي لا تحتاج من المستخدم 

موس Gea‏ ا ابلا > 1 


تسير باتجاه واحد من الكاتب أو المؤسسة 


Static Website 


Dynamic Website 


إلى المستخدم» دون أن يكون هناك رجع c‏ 1 
a A :‏ ~ 


صدى أو رد فعلء أو يمكن أن تكون من 


المستخدم إلى الموقع تعليقاً على بعض en‏ 
المشاركات والموضوعات من دون رد فعل 
من الس قا 
whaia‏ 5 التفاعلية Static Website‏ 
me = :Interactive Web Pages‏ 1 
ولص meee we ei a eae) Sh‏ 7 
الأذوات الخاصة بالتفاعل مع 
محتواهاء كإتاحة الوصول إلى الروابط فتلام E.‏ 


التي تحويهاء أو البحث في قواعد 


البيانات والمعلومات المرتبطة بموضوعاتهاء أو الإجابة عن الأسئلة» أو طلب المساعدات» 


أو إبداء الرأي بموضوعات معينة. 


هناك ثلاثة أشكال للتفاعل عبر صفحات الويب هي: 
1. التفاعل haf sag Functional Interactivity „ihg‏ أشكال التفاعل» ويركز 
على المهمة الأساسية من خلال الإبحار داخل صفحات الويب» سواء عن طريق القوائم 
المنسدلة أم أشرطة التصفح أم محركات البحث أم من خلال روابط النصوص التشعبيةء 
وهذان الأخيران من أكثر التفاعلات الملاحية استخداماًء إذ يستطيع المستخدم النقر على 
أي رابط نصي لينقله إلى صفحة أخرىء أو النقر على زر تشغيل فيلم أو سماع 
موسيقى» وهناك أشكال أكثر تعقيداً لهذا النمط من التفاعل» ويتمثل في العمليات التي 


تتيح للمستخدم إمكانية تغيير مظهر الويب. 


e C [D www.dampress.net se 
ee FT عربي ودولي اقتصاد من هنا وهناك ثقافة وفنون اتصل بنا‎ 


8 
tut ai 
= Oe ee 
ee 


بعض أشكال التفاعل الوظيفي موضحة بالقوائم المنسدلة والروابط التشعبية 





2.تفاعل الاستجابة 171673611016 :۴eedback‏ في هذا النمط من التفاعل يبحث 
المستخدم عن المعلومات لأغراض مختلفة» وقد GIL)‏ منه إدخال بعض المعلومات في 
مستطيل البحث مثل إدخال البريد الإلكتروني أو ملئ استمارة معينة» وهذا يمثل استجابة من 


طرف واحد حيث يستجيب المستخدم للأسئلة المطروحة عن طريق إدخال البيانات في 


تل اة 


e> C www.bbc.com/arabi =% 


شارك برأيك: > موقع يتيح للمستخدمين التفاعل مع 





TT‏ هل يشكل اتفاق الصخيرات آخر فرصة لإنقاذ ليبيا؟ المواد المطروحةمن خلال المشاركة 
ا کو ب السو ره وا بآرائهم 
© قبل 4 ساعة 10 
i‏ هل تحترم وسائل الإعلام العربية خصوصية الأفراد؟ 
© 16 ديسمبر/ كانون الأول 2015 ١‏ ©[ 6 


925] تويتر: اختطاف قطريين بصحراء العراق ومهرجان "البوس” في مصر 
قضايا عديدة جذبت اهتمام مستخدمى مواقع التواصل الاجتماى ق ال لعربية. لعل أبرزه 





2. التفاعل المباشر s :Real-Time Interactivity‏ التفاعل الذي يمكن من خلاله 
إجراء اتصالات مباشرة بين المستخدمين بعضهم ببعض بشكل مباشر من خلال برامج 
المراسلات AS, (Yahoo Messenger and MSN Messenger) Ja ipil‏ 
برامج مراسلات بين أعضاء المنظمة الواحدة» ويتم هذا التفاعل خلال الاتصال المباشر 
عبر الإنترنت» ويمكن خلال هذا الاتصال تبادل النصوص (الكتابة المباشرة)» والصور 
ومقاطع الفيديو والموسيقا والكلام المباشر. 


ERED 


File Edit Actions Tools Help 


sor 
3! 


+ > F r 
2 ê ® ٠ RR 4 
dj Your status is currently set to Busy. 
kaizen V6.24! says 

how u doing? 

! says: 

gré.... 

kaizen V6.24! says: 
hey need a favour. 

l says: 

wat abt u? 

kaizen V6.24! says: 

am writing something 
kaizen V6.24! says: 


kaizen V6.24! says 
doing alright 
kaizen V6.24! says 





kaizen V6.24! 
under tools 
aize 24! 






kaizen V6.24! says 
sorry under ‘Actions’ 
kaizen V6.24! says. 
promise i'll feature you on my blog ق‎ 
lkaizan 24l cave 
9o -DP pA 


Last message received at 7:19 PM on 7/7/2007. 





Post free classified ads for Real Estate, Auto, a 





can you open the msn messenge rapplication main screen? 


p down menu saying request remote assistance 


لعالقك 


م 


أشكال التفاعل 
لمباشر التي تتيح 
التواصل بين 

ا لمستخدمين 

















ت .دعم الرسوميات: تعد الويب ٥۴6‏ الخدمة الوحيدة 
القادرة حتى الآن على التعامل مع أي نوع من أنواع 
الرسوميات» وذلك بسبب قدرة مستعرضاته (برامج 
التصفح) على دعم الرسوم والأنواع الأخرى من الوسائطء 
وهذا الدعم للرسوم هو الذي زاد من شعبية الويب 


وانتشارها. 


ت- تصميم الصفحات المتنوعة: أضافت خدمة الويب للإنترنت إمكانية إنشاء المواقع 


الإلكترونية» والصفحات التي تخدم أغراضاً مختلفة: سياسية واعلامية واقتصادية وغيرهاء 


ومكّنت هذه الخدمة المؤسسات والأفراد من وضع أنفسهم (عبر مواقعهم وصفحاتهم) على 


الإنترنت» تحت عناوين متفردة ومميزة يستطيع المستخدم الوصول إليها دون جهد يُذكر. 
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خامساً: خدمة الويب 2.0 Web‏ 

Web 1.0 Web 2.0 ظهور خدمة الويب ط۷6 إلى تطور نمو‎ Gal 

الإنترنت من خلال تطور تدريجي متسارع لتقنيات mman m‏ 

الشبكات الاجتماعية وبرامج التصفح» وطرق 

معالجة البيانات الإلكترونية حتى وصل عدد ا 

Je ease al‏ العام إلى الملايين» = 8 تت 
N‏ ” 

111177011 


45 million global users 1 bilion+ Gobel users 


2006 1996 
ومن خلال اعتماد أساليب للتصفح أكثر سهولة» ومن خلال الكتابة والقراءة ودخول أدوات جديدة مثل 
المشاركة الاجتماعية بين المستخدمين» وتطور إمكانيات تحكم المستخدمين بالمواقع التي يفضلونهاء وقد 
أدت هذه المرحلة إلى ظهور مصطلح جديد هو 2.0 85ل/الا وهو الجيل الثاني من الشبكة العالمية. 


اذا كانت خدمة الوبب 1.0 Web‏ يُنيت nals!‏ العلاقة A seeks Pass: oN Bale whee fe)‏ 
و : بلدا س (من موقع وا إلى میں ( 





Gls «One to many relationship‏ خدمة الويب 2.0 ۷8۴ تسعى إلى إيجاد مفهوم جديد مبني 


على علاقة (من متعدد إلى متعدد) «Many to many relationship‏ 
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وترتكز بنية هذه الخدمة على إيجاد إنترنت جديدة أكثر إنسانية وأكثر 
تفاعلية من الإنترنت السابقة» حيث سيكون المفتاح لفهم العلاقات في Hg FR‏ 


ste corporate, 


خدمة الويب 2.0 GI chal Web‏ محوره هو عدد كبير من me we‏ 
المستكدميق. تعد كنيز من Uap. dygai‏ ذلك اشرت A‏ & 
تتحول من مصدر للمعلومات إلى مصنع للمعلومات التفاعلية. ےھ ل ع8 
وخدمة الويب 2.0 11/80 الجيل الثاني من المجتمعات الافتراضية “a BB PR‏ 
والخدمات المستضافة عبر الإنترنت ليست أداة جديدة ولا تقنية أخرى» e‏ = 


ولا هي لغة aay‏ إنها مجرد مفهوم (00076601)» وبالتالي فإن أي موقع إنترنت يفلح في تغيير تركيبته 


الداخلية من (واحد» متعدد) إلى (متعددء متعدد) سيصبح جزءاً من عالم الويب 2.0 Web‏ 


وقد تم تداول هذا المفهوم للمرة الأولى في دورة نقاش بين شركة لااأ©0”8 الإعلامية المعروفةء 
ومجموعة ©/أا 76013 الدولية لتكنولوجيا المعلومات في مؤتمر تطوير الويب الذي عُقد في سان 
فرانسيسكو عام 2003 وقد ذكر هذا المصطلح نائب رئيس 48)4 «(Dale Dougherty) O’Reilly‏ 
في محاضرة خلال هذه الدورة للتعبير عن مفهوم جيل جديد للإنترنت» ومنذ ذلك الحين عد كل ما هو 
جديد وذو شهرة على الشبكة العالمية جزءاً من 2.0 Web‏ 
وقد عد البعض أن موجة المواقع الجديدة التي تعتمد في تكوينها Call‏ 

| ولد 
على الشبكات Slaey cin Social Networks4jclaia'y)‏ واد m‏ .> 
ewiki‏ وهي الصفحات التي يستطيع زائر الموقع التعديل wn‏ .7 ) 
عليهاء أو على المواقع التي تسمح للمستخدم بوضع مدونته على 
الإنترنت بحيث يستطيع الآخرون الاطلاع عليها والبحث فيها 
من نقنيات الويب 2.0 Web‏ كما عد البعض أيضاً أن 





Blogs Al gall‏ وتقنية ال ۸55 وغيرها من التقنيات التي 
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يمكن من خلالها التعديل والإضافة من قبل المستخدمين من تقنيات الويب 2.0 Web‏ حتى يمكن 
القول إن الويب 2.0 ۷/١‏ هي جميع المواقع التي تعتمد على تفاعل المستخدمين فيما بينهم. 


ومن المستحدثات التي صاحبت ظهور خدمة الويب 2.0 ۷/66 تقنيات تعمل على رفع مستوى كفاءة 
وسهولة تصفح المستخدم العادي للتطبيقات» والمواقع الموجودة على الشبكة» والتي تقدم إمكانيات ana‏ 
وبالتالي تحسن من خبرة المستخدم في التعامل معها وفي الاستفادة منهاء فهي مثلاً تتيح لصفحة الموقع 
أن تستقبل تحديثاً لجزء من محتواها يقوم به أحد المستخدمين دون الحاجة إلى التعامل مع الجهاز 
Aa asig Server-side software anall‏ برنامج التصفح بالتعامل مع الجزء الذي تم تحديثه على 
الصفحة دون الحاجة إلى إعادة تحميل الصفحة ككل كما هو متعارف عليه في الجيل الأول من شبكة 
الوت 


Web 2.0 سادساً: خصائص خدمة الويب‎ 
عر‎ facebook 4 
3 oe 
hi5 g 


vuh ۸ > Linked ff 


Gg slideshare . Cwitter 


N flickr 
Google = del.icio.us 
Web 1.0 بجملة من الخصائص والسمات التي تميزها عن الويب‎ ٥۴6 2.0 تتميز خدمة الويب‎ 
والتي يمكن تلخيصها فيما يلي:‎ 

1- استخدام برامج وتقنيات تركز على الطبيعة التفاعلية في استخدام الويب» وفي التعامل مع 
المحتوى» وفي المشاركة في كتابته وتغييره وتعديله من قبل المستخدمين» وفي تداوله فيما agin‏ 
بمرونة وبسرعة. 

2- السماح للمستخدمين باستخدام أي تطبيق عليهاء والتعديل فيه من خلال تقنيات سهلة بالنسبة 
للمستخدم العادي. 
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3- المستخدمون هم المتحكمون في المحتوى والبيانات الموجودة في المواقع على 2.0 Web‏ 
واستخدام واجهات وتصميمات المواقع» والتطبيقات المختلفة على 2.0 Web‏ تكون سهلة بالنسبة 
للمستخدمين» ويمكنهم التحكم فيها وتغييرها كيفما شاؤوا. 

4- التركيز على توظيف البرامج والتقنيات التي تخدم تكوين شبكات اجتماعية» وجماعات افتراضية 
من خلال المواقع والتطبيقات المختلفة الموجودة على 2.0 ‘Web‏ 

5- تقديم خدمات مختلفة منها: المدونات ومواقع التواصل الاجتماعي كالفيسبوك» وصفحات الويكي› 
وموقع اليوتيوب» وغيرها من المواقع. 

6- انخفاض كلفة الإنشاء والتصميم» فمثلاً لو قام أصحاب موسوعة الويكيبيديا باستخدام 1.0 Web‏ 
لتطويرهاء فإن كلفة هذا التطوير ستتضاعف مئات المرات» لأن عليهم توظيف جميع الأشخاص 
الذين ساهموا في بنائهاء أما باستخدام 2.0 ۷6ء فإن القوة الدافعة لهذا للتطبيق مزودة بتقنيات 
برمجية عالية High Programming Tech‏ تمكّن القيام بتنسيق جهود آلاف المتطوعين 
بصورة آلية. 

7- إن مواقع 2.0 ۷/66 أكثر سهولة في الاستخدام» وأكثر فعالية بين المستخدمين من مواقع Web‏ 
1.0. 

8- إن برامج مواقع 2.0 Web‏ مفتوحة المصدر» ومتاحة لجميع المستخدمين» وقابلة للتطوير 
المستمر من قبل المستخدمين» وليس لها إصدار محدد. 

9- زيادة الاكتشافات العلمية» وبخاصة في مجال البرمجيات حيث إن المطورين هم من المستخدمين 


لهذه المواقع» ويعملون دون أجر. 
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ويمكن إظهار أهم الفروق بين 1.0 Web‏ 2.05 هلالا من خلال الجدول التالي: 


. خدمة موجهة نحو قطاع الأعمال خدمة موجهة نحو المجتمعات الإنسانية 





. تعتمد بصورة رئيسية على لغة البرمجة | تعتمد بصورة رئيسية على لغة البرمجة ۷1× 


HTML 





. تهتم بحقوق ملكيات المعلومات تهتم بالمشاركة في المعلومات 





. ترتكز على المصنفات taxonomy‏ ترتكز على الديباجات Tags‏ 





. تعتمد على مفھوم client /Server‏ تعتمد على peer-to-peer asgie‏ 





RSS Feeds تستخدم البوابات 0118|15م تستخدم الملقمات‎ ٠ 





. تعتمد على الاتصال بالإنترنت تعتمد على اتصال السعات العريضة 





. معدات ال©113/011/31! عالية الكلفة الحركة من والى الموقع 830011017 عالية التكلفة 





. مصممة للقراءة بصورة رئيسية مصممة للكتابة بصورة رئيسية 





. أكثر الصفحات شهرة هي صفحة البداية | أكثر الصفحات شهرة هي صفحة المدونة 8/1095 


Homepage 





Web 2.0 wg سابعاً:‎ 


على الرغم من كل ما ذكر من ميزات وخصائص = ae‏ 


الويب 2.0 Web‏ فقد تم توجيه العديد من 


الانتقادات لها في بداية ظهورهاء وربما يعود ذلك o w wE "O‏ 


أذهان العديد من الباحثين والمستخدمين» ويمكن 
تلخيص هذه الانتقادات في النقاط التالية: 
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1-لم ينضج مفهوم الويب 2.0 اعل/الا بصورة كافية» فما يعنيه الويب 2.0 Web‏ لبعض المستخدمين 
قد لا يعنيه لغيرهم» ويعتقد بعض المستخدمين أنه ربما يعد جزءاً من الويب 1.0 Web‏ 

2- ليس هناك ia‏ فاصل بين ويب 1.0 ۷66 وويب 2.0 اعل/الا بصورة قاطعة» فهناك بعض المواقع 
المختلطة التي تستخدم التقنيتين معاًء وبالتالي يصعب تحديد هويتها. 

3- إن الويب 2.0 à Web‏ الواقع ليست شيئاً جديداًء ولا هي إصدار محسن» بل هي امتداد تقني 
طبيعي للويب 1.0 ۴6٥۷ء‏ فالتقنيات المستخدمة لتطوير مواقع الإنترنت في الويب 1.0 ام۷ 
مازالت كما هي منذ نشأة الويب» وهو ما أكده مكتشف الويب .Tim Berners-Lee‏ 


ثامناً: خدمة 3.0 طعللا 


أما التطور الأخير للويب والمتمثل في )3.0.1 Web‏ فقد g E mininote‏ 


j . .‏ عم 
تنورعت cdas lia‏ فمن الباحنين من عده مجموعه من N G‏ 
al‏ لتطبيقات المجتمعة في إطار واحد» حاملة مجموعة من ا 


الخصائص المتمثلة في الصغر النسبي لحجم هذه 4 
التطبيقات: والقادرة على أن تعمل في أي بيئة إلكترونية . 17ل t‏ هج 


Remote 





8 pa P 
Mobile WEB 3 


كالكمبيوتر أو الهاتف المحمول» أر الساعدات اة ”2 oase SEAE‏ 


Remote Server 
وتكون في الوقت نفسه سريعة جداًء وقابلة للتكيف وفق رغبة مستخدمهاء معتمدة في‎ PDA Ayal 
توزيعها وتسويقها كمنتج على زيادة الوعي بهاء والانتشار من خلال ترابط الشبكات المختلفة الموجودة‎ 
على الإنترنت» مما يلغي الحاجة إلى تخزينها وشرائها.‎ 


ومن الباحثين من أشار إلى أنها تمثل إحدى التقنيات المستحدثة في مجال التعليم» وتعتمد هذه التقنية 
على الذكاء الصناعي في عمليات التصنيف والبحث وإدارة المواقع» ومن خلالها يتم تحويل صفحات 
ومواقع الويب من مجرد صفحات تابتة أو ديناميكية تعتمد على التفاعل الاجتماعي إلى قواعد بيانات 
تقوم بفهرسة ما يتم وضعه فيها من بيانات ومعلومات» والتوفيق بينها وبين مرادفاتهاء ومن ثم إمكانية 
توزيع تلك المعلومات لاستخدامها في أكثر من سياق. 
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لذلك يمكن أن يطلق على الويب 3.0 Web‏ 
مصطلح الويب Symantec Web (Nall‏ 

لاعتماده على معاني ودلالات الكلمات» فهو 
يعتمد بشكل أساسي على الذكاء الاصطناعي في 
عمله وإدارته» كما يطلق عليه الويب الذكي 





Web 01 لاعتماده على تكنولوجيا الذكاء الصناعيء» ويطلق عليه ويب البيانات‎ «Intelligent Web 
على تحويل بيانات الويب إلى لغة تفهمها الآلة.‎ oaleic'Y «Data 
وقد بدأ العلماء في التفكير في الجيل الثالث من الويب واحدى هذه الأفكار هي ما يسمى بالويب‎ 
ستُجرى محاولة تطبيقها في الجيل الثالث من‎ l aiid aÍ sag Semantic Web gall 
الإنترنت.‎ 
«Symantec Web ANA oudl alhas è La g Jsi Tim Berners-Lee ويُعد تيم بيرنرز لي‎ 
وقد دخل مفهوم الويب 3.0 للمرة الأولى في أوساط الجمهور‎ 


© 
عام 2006م: والتي وصفت هذا المصطلح كمجال» حيث 68 
بن لالات Cladus Sal‏ الريب gah‏ قراءة WwW epi‏ 
والويب Web‏ 3.0 هو مصطلح يستخدمه العاملون في 


المجال التقني والصناعي لوصف مستقبل شبكة الويب ø‏ 5 


العالمية» وللإشارة إلى الموجة المستقبلية لإبداع الإنترنت؛ 


Semantic 
Web وتختلف الرؤى بشكل متفاوت حول المرحلة التالية من ثورة‎ 


الويب» حيث يعتقد البعض أن ظهور التقنيات مثل الويب الدلالي (الويب الذي يعتمد على فهم معاني 
الكلمات) سيغير طريقة استخدام الويب» وسيؤدي إلى احتمالات جديدة في الذكاء 

الصناعيء» فهو يحاول تحويل دور الآلة من مجرد عارض للمدخلات التي أدخلها المستخدم إلى فهم 
المعلومات التي أدخلها المستخدمء وبالتالي تكون أكثر إنتاجية» ويعتمد في البحث على اللغة الطبيعية» 


والتنقيب عن المعلومات ومرادفاتهاء والتعلم الآلي مستخدماً تقنيات الذكاء الصناعي أو الويب الذكي. 
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ويبحث متصفح الويب 1.0 Web‏ عن الروابط بين المستندات» أما متصفح الويب 3.0 ala Web‏ 
يبحث من خلال الروابط (المستندات) في شبكة المفاهيم» لذلك على المتصفح هنا أن يكون واعياً بما 


وراء مستندات الويب وخدمات الاستعلام. 


تعريف خدمة الويب 3.0 اع/الا: 
1 - تُعرّف خدمة الويب 3.0 ۷66 بأنها: 
تقنية ويب تشتمل على المستندات أو أجزاء من المستندات» تصف العلاقات الصريحة بين 
الأشياء (المعلومات أو المواقع)» وتحتوي على معلومات دلالية تم تجهيزها خصيصاً لتفهمها 
برمجيات البحث والتصفح» وهي تعتمد على مبدأً البيانات المشتركة» فعندما تَعرف معلومة معينة 


بشرط أن تحدد علاقة الربطء أي أن الويب الدلالي عبارة عن تبادل البيانات من خلال أكواد 
وصف العلاقة بين المعلومات» ثم معالجة هذه البيانات بشكل منطقي استدلالي تحليليء كما أنه 
عبارة عن رؤية تقوم على ربط البيانات في الملفات والمستندات المنشورة على شبكة الويب 
بطريقة معينة تستطيع معها البرامج وأجهزة الكمبيوتر استخدامهاء ليس فقط من خلال عرضها 
على المستخدم» ولكن من خلال ميكنة ودمج.ء واعادة استخدام البيانات عبر تطبيقات متنوعة؛ 
ويصف الويب 3.0 Web‏ تطور استخدام الويب والتفاعل الذي يشمل تحويل الشبكة من 
مستعرض للمعلومات ومنشئ للمحتوى بداخلها إلى قاعدة بيانات» ويكون الويب 3.0 Web‏ 
أقرب إلى القراءة والكتابة البشرية ولكن على الويب. 


2- يمكن تعريف خدمة الويب 3.0 Web‏ على أنه: 

محتوى ذو جودة عالية يحول الويب إلى قاعدة بيانات ديناميكية تعمل في إطار الذكاء الصناعي 
لتيسير عمليات البحث» والوصول بكفاءة ويسر إلى المعلومة والمعلومات ذات العلاقة بهاء مثال 
ذلك: قيام أحد المستخدمين بالدخول إلى حسابه الخاص بموقع اليوتيوب ©1010 لا0لا» ويقوم 


بالبحث عن فيديو لتعليم برنامج! ti Moodle‏ ثم يحصل على مجموعة من النتائج» ويقوم 


‘Moodle: Modulor Object — Oriented dynamic Learning Environment 
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باستعراضها وفتح بعض الوصلات بهاء وعقب الانتهاء يخرج منهاء وفي وقت آخر عند دخول 


Gal gu gall thd‏ ست عن اقات ما ك الح كه رركا de‏ الست قر 
a‏ انه الخاين افر git‏ يحاول كات افرع من الريب هل .ايور بقل 


تاسعاً: مميزات الويب 3.0 ا٥۷‏ 





يتميز الويب 3.0 ۴ بالعديد من المميزات التي تجعله = mi meee‏ 
يفوق أجيال الويب السابقة له» ويساعد على تحسين خدمة 
ریب كى يغ من DIA‏ دة اكت رش بالتعامك 
الذكي مع مصادر الويب ومستنداته» ويبحث عن الكلمات 
ومرادفاتها من خلال وضع المعارف والمصطلحات في قواعد 
بيانات» ومن ثم استدعاء المعلومات التي تم تسجيلها بسهولة 


ويس وسن ممبزات الريب 3.0 sLial Web‏ 














1- التعامل بمنطقية مع البيانات» ومحاولة محاكاة العقل البشري. 
1- تطوير عمليات البحث بحيث تبحث عن الكلمات ودلالاتها. 

2- توظيف كل من بيئتي عمل الويب 2.0 والويب 3.0 والاستفادة من مميزات كل منهما. 
3- إمكانية التحديث المستمر وبشكل آلي. 

4- توظيف إمكانيات الذكاء الصناعي في خدمة العمل داخل إطار عمل الويب 3.0 Web‏ . 


كما يشير الباحثون إلى أن أهمية الويب 3.0 اعلالا تتمثل في: 





- بيئة تعليمية ديناميكية محددة الهدف قابلة للتعديل والتغيير» أو هو منصة برامجية للتعليم الإلكتروني الافتراضي› 
وأول من طور الموودل هو 1001019100725 1/13/6117 لمساعدة المعلمين في تشكيل برامج تدريسية على الإنترنت» 
بالتفاعل والتعاون في بناء المضمون العلميء وأول إصدار منه أطلق في 20 آب 2002ء ومعظم مكوناته 
طورت في أستراليا. 
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1 - تحسين عملية البحث. Web 3.0 - Sémantique‏ 
2- تحسين تصنيف البيانات. 

3- تسهيل تطوير المفردات. 

4- تحسين نشر المعلومات المنتقاة. 

5- تكامل المعلومات (البيانات ومخططاتها). 


Ge 11 


3 
è 





Bove 


6- مزج البيانات وتجسيدها. 

7- التوليف الآلي للويب. 

8- خبرة العثور على المعلومات. 
9- آلية الإجابة عن الأسئلة. 
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الخاتمه 
أدى ظهور وتطبيق خدمة الويب على الإنترنت» في بداية التسعينيات» إلى وضع أول برنامج تصفح 
للإنترنت» كما أدى إلى إطلاق اسم (الإنترنت) على الشبكة العالمية للمعلومات» كما وفرت هذه الخدمة 
إمكانية نقل الصور والأصوات عالية الجودة منذ عام 1993 من خلال مسارات فائقة السرعة؛ مما أدى 
في بداية عام 1994 إلى بدء الاستخدام الشخصي للإنترنت بشكل واسع جدآًء وهذا أدى في بداية 
5 إلى انفجار الشبكة العنكبوتية الدولية» وأصبحت واحدة من أدوات الاتصال والإعلام الجماهيرية؛ 
ولاسيما مع ظهور الصحف الإلكترونية» وظهور التطورات المتلاحقة على خدمة الويبء وانتقال الاتصال 
إلى الصيغة التشاركية والاجتماعية» وظهور العديد من مواقع التواصل الاجتماعي التي وسعت من دائرة 
علاقات الأفراد الاجتماعية» وزادت قدرتهم على الحصول على المعلومات» وعلى التفاعل أكثر لتطوير 
مشاركتهم في بناء هذه المواقع. 
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الخلاصه 
يخلط الكثير من المستخدمين - وحتى الباحثين - بين الإنترنت والويب» ويعتقدون أن الويب هي 
الإنترنت» في حين أن الويب 1/8 ©1110 010 :/الا/الالالا هي إحدى خدمات الإنترنت التي أعطت 
الإنترنت اسمها الحالي وشكلها الحالي» وحولتها من وسيلة لاستخدام الخاصة من الباحثين والمتخصصين 
إلى استخدم الملايين من الأفراد في مختلف أنحاء العالم» وحققت الانفجار الكبير لشبكة الإنترنت على 
مختلف المستويات. 
وقد أضاف ظهور هذه الخدمة في أوائل التسعينيات» العديد من الميزات لشبكة الإنترنت» كما أضاف 
الجيل الثاني من خدمة الويب 2.0 ۷60 ميزات أخرى نقلها من صيغة الاتصال أحادي الاتجاه إلى 
الاتصال من مجموعة من الأفراد إلى مجموعة أخرى» وأدى إلى ظهور أشكال متعددة من التطبيقات 
التشاركية والتفاعلية عبر الإنترنت كالمدونات» وصفحات الويكيء ومواقع التواصل الاجتماعي المختلفة. 
كما يحاول الجيل الثالث من خدمة الويب 3.0 ط۷6 أن ينتقل بخدمة الإنترنت - بالاعتماد على 
تطبيقات الذكاء الصناعي - إلى محاكاة العقل البشري» والتعامل بمنطقية مع البيانات والمعلومات› 


وبالتالي أن يجعل من الآلة أكثر مساهمة في إنجاز المهام التي يطلبها المستخدم من الإنترنت. 
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التمارين 
اختر الإجابة الصحيحة فيما يلي: 
ظهور واستخدام خدمة الويب عبر الإنترنت ور لها العديد من الميزات: 
8. استخدام برامج التصفح. 
B‏ جودة في الصوت والصورة» وسرعة نقل البيانات. 
©. استخدام الوسائط المتعددة. 


شن کرب Damen‏ 
A‏ مفهوم غير واضح وغير محدد. 


C‏ يحتاج إلى تقنيات أكثر تطوراًء وأكثر كلفة. 
الإجابة الصحيحة: ۸ مفهوم غير واضح وغير محدد 
ظهر مفهوم الويب 3.0 ۷66 للمرة الأولى عام 1995 على لسان 86۲۸6۲5 نفسه. 
۸. صح 


8. خطأ 


الإجابة الصحيحة: ۸ صح 
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من خصائص خدمة الويب: اللاخطية» والتفاعلية» ودعم الرسوميات. 


ah 
ibs .B 


الإجابة الصحيحة: ۸ صح 
من مميزات الويب 3.0 ۷۷6 محاكاة العقل البشري في التعامل بمنطقية مع المعلومات. 
۸. صح 


8. خطأ 


الإجابة الصحيحة: ۸ صح 
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الوحدة الثانية 


العناصر 


© مقدمة. 
o‏ مفهوم موقع أو صفحة الويب. 
ه مفهوم تصميم موقع أو صفحة الويب. 
o‏ قواعد تصميم مواقع الويب المتعلقة ب: 
o‏ سهولة الاستخدام. 
ه أدوات الإبحار. 
o‏ الوب الرضول: 
ه الإجراءات القانونية والأمنية. 
وذ :الاتسمال Po) Te‏ 
© التسويق. 
0 الدلالة على الموقع. 
ه الأخطاء. 
© الاختبار والتجريب. 


© تقييم مواقع الويب. 
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الأهداف التعليمية 
بعد دراسة هذه الوحدة التعليمية يجب أن يكون الطالب قادراً على أن: 


1- يعرف مفهوم موقع أو صفحة الويب. 

2- يشرح مفهوم تصميم موقع أو صفحة الويب. 

3- يحدد مجالات جوانب تصميم صفحة الويب كما أوضحها |اع/لام5. 
4- يعدد القواعد والنصائح التي تفيد في تصميم موقع الويب. 

5- يشرح الخطوط الإرشادية لتصميم مواقع الويب. 


الكلمات المفتاحية: الإنترنت - موقع الويب - التصميم - الوسائط المتعددة - النص المتشعب - 
الروابط - برامج التصفح - لغة ال 17١1‏ - المستعرضات - واجهة التفاعل - الصفحة الرئيسية - 
شعار. الموقع - خريطة الموقع - عنوان الموقم..- العناوين - الهوامش. - أدوات الإنحار ب سرعة 
ا ل > ال = scat agen‏ 


أولاً: مقدمة 


أيد الكثير من الباحثين أن خدمة الويب تعد من 
أكثر التطورات دلالة في عالم الاتصال والإعلام: 
كما هو اختراع الطابعة على يد غوتنبرغ لما لهذا 
الظهور من تأثيرات قوية على الإنترنت» وتحويلها 
إلى واقع إعلامي اتصالي يتعامل معه الملايين من 


الأفرادء ولا يمكنهم الاستغناء عنه. 





وقد تجلى تأثير خدمة الويب بشكل مبدئي على إمكانية ظهور العديد من صفحات ومواقع الويب 
المتخصصة في مجالات إعلامية ومعلوماتية واتصالية متنوعة» فمنها المواقع الإخبارية» ومنها الصحف 
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الإلكترونية» ومنها المواقع التابعة لمؤسسات إعلامية» ومنها مواقع التواصل الاجتماعي كالفيسبوك 
وتويتر» والمدونات وصفحات الويكيء وغيرّها من المواقع التي يمكن تسميتها بصفحة ويب. 

ويُعد الشكل الخارجي لهذه الصفحات والأساليب والبرامج» ولغات البرمجة المعتمدة في تصميم وتكوين 
هذه الصفحات عاملاً حاسماً في عملية زيادة انتشار واستخدام هذه الصفحات» وفي سهولة ويسر 
استخدامها من قبل المستخدمين» وبالتالي زيادة تأثير هذه المواقع على المستخدمين بشكل أكبر» وهو 
الأمر الذي سيتم عرضه في هذه الوحدة حيث سيتم التعرض لمفهوم صفحة أو موقع الويب» ومفهوم 
تكوين أو تصميم هذه الصفحاتء والقواعد العامة التي يجب مراعاتها في أثناء عملية التصميم لتحقيق 
الأهداف السالفة الذكر. 


Lit‏ مفهوم موقع أو صفحة الويب: 
سبق التعرض لمفهوم خدمة الويب 
وتعريفاتها المتعددة» ولا يختلف تعريف 
صفحة أو موقع الويب عن مفهوم الخدمة 
بشكل عام فهناك عدة تعريفات لموقع 
الويب منها: 





1- موقع الويب هو: 'مجموعة من ملفات الويب المرتبطة فيما بينهاء والمتضمنة لملف افتتاحي 
اسمه الصفحة الرئيسية 53906 ©1977 التي يمكن الدخول إليها من خلال بقية الوثائق 
المتضمنة في الموقع» ويتم الوصول إلى الموقع عبر كتابة اسمه على المتصفح'. 

2- كما يمكن تعريف موقع الويب بأنه: "ملف أو مجموعة ملفات يتم تخزينها على الخادم Server‏ 
يمكن الوصول إليها عبر الإنترنت» ولكل موقع صفحة رئيسية تصمّم غالباً لتكون الملف الأول 
الذي يزوره المتصفح ليأخذ فكرة عامة عن مضامين الموقع» وتتضمن الملفات الموجودة في 
الموقع وصلات نصية» أو رسومية يتم النقر عليها باستخدام الفأرة بقصد الانتقال من ملف إلى 


آخر داخل الموقع أو خارجه". 
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ibe‏ اة مرا gd‏ جار Cala‏ خانم يكم 


3 ويعرف الإعلاميون موقع الويب بأنه: 


الوصول إليها عبر الإنترنت» وعبر أحد متصفحات الويب» ويتخذ الموقع شكل الصفحات أو 


Home ركه من الصفكة الرفيسية:‎ CAT cota النضن- القافق:‎ tale) atl 


6م واجهة لهاء ويتم التنقل بينها بواسطة وصلات عادية أو تفاعلية» وتقدم الرسائل التواصلية 


في شكلٍ منفرد (نص» وصوت» وصورة» وفيديو) أو متعدد «Multimedia‏ وغالباً ما تقدم مواقع 
ارت کات ف ال Saal cn Joi, Dalal $e‏ 
4- ويعرّف موقع الويب الإلكتروني أيضاً بأنه: "مجموعة من الصفحات والنصوص والصور 


والمقاطع الفيديوية المترابطة وفق هيكل متماسك ومتفاعل» يهدف إلى عرض ووصف المعلومات 


يكون الوصول إليه غير محدد بزمان أو مكان» وله 


والبياناات عن جهة أو مؤسسة ماء بحيث 


عنوان فريد محدد يميزه عن باقي المواقع'. 


ويمكن أن يحتوي موقع الويب على موقع فرعي واحد أو أكثرء والموقع الفرعي هو موقع متداخل في 


موقع ويب آخرء يسمى موقع الويب الذي يحتوي على مواقع فرعية. 
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ثالثاً: تصميم موقع أو صفحة الويب: 
بن وح الا عل اميا وتم رة 
pal (6s) laa‏ حت قاف المستخدمين 
ن الوصول. العيافن. .والتريع. الى . المعارنات 
المطلوبة» لذا تحرص الجهات التي تطلق مواقعها 
على تصميمها daib‏ صورة بحيث تجذب 


المستخدمين إلى زيارتها واعادة زيارتهاء 





التخصص» 


التعريفات تناولت عملية التصميم» Gje dya‏ 


الويب» وغيرها من الاعتبارات» ويوجد عديد من “WEB DESIGN‏ 
2 ~ 


'عملية ترتيب وتنظيم العناصر البنائية التي يعتمد عليها المصمم للوصول إلى 
المستخدمين من أجل تحقيق أهدافهم في الحصول على المعلومة بيسر وسهولة"؛ وتشمل 
العناصر البنائية: الشعار والعناوين» والنتصوص والخطوطء والفواصل والألوان» والوسائط 


المتعددة من صور وأصبوات: ورسوميات ومقاطع فيديو» وغيرها من العناصر. 


ويحقق أهدافهم في الحصول على المعلومات» ويحقق أهداف المواقع في الوصول 


السريع إلى المستخدمين'. 


. يعرف ااع/ا20 8 101735 التصميم بأنه: "مخطط تمهيدي لتصميم الواجهات الرئيسية 


والصفحات الداخلية عن طريق التحكم بالنصوص والألوان» والعناصر التفاعلية والوسائط 
المتعددة» والربط بينها بطريقة مريحة وجذابة وسهلة الاستخدام". 


. ويذكر حلمي محسب أن التصميم هو: "عملية وضع العناصر البنائية بصورة متناغمة 


بحيث يدعم كل عنصر بنائي العنصر الآخر مع مراعاة أسس التصميم المتعارف 
عليهاء وهي: الوحدة والتباين والاتزان والحركة» إذ يقوم التصميم بوضع كل عنصر بنائي 
في مكانه المناسب طبقاً للنظريات السيكولوجية والفسيولوجية للإيصار المرئي". 


. ويؤكد الباحثون أنه: 'عملية ابتكار وإبداع باستخدام خطة معينة لتوظيف عناصر 


التصميم» والتعامل مع المساحات والخطوط والألوان لتحقيق الجانب الجمالي والوظيفي". 


. يقدم هيثم جودة تعريفاً لعملية التصميمء فيذكر أنه: "علم وفن تحويل المادة الإعلامية 


إلى شكل رقمي قابل للقراءة يتوفر فيها يسر التصفح والاستخدامء وذلك باستخدام 
التخاضين النناقية ا 


٠‏ حروف ونصوص وأشكال وصور وألوان وفواصل. 
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٠‏ جداول تتلاءم مع شبكة الإنترنت. 
o‏ عناصر بنائية تكنولوجية من وسائط متعددة ونص متشعبء وروابط تشعبية. 
o‏ عناصر نفاعلية من خدمة التعليق على الأخبار» وغرف الدردشة» والبريد 
الإلكتروني» والقوائم البريدية". 
والملاحظ أن الباحث جمَع العناصر التيبوغرافية مع العناصر الغرافيكية حيث يشير 


بعض الباحثين إلى أن الصور والألوان والرسوميات تصنف كعناصر غرافيكية. 


مجالات جوانب تصميم صفحة الويب كما أوضحها ااع/لاهط: 
أوضح Powell‏ أن جوانب التصميم تشمل خمسة مجالات: 
1[-المحتوى: ويشمل طريقة بناء المحتوى وتنظيمه باستخدام إحدى لغات البرمجة مثل: SHTML‏ 
أو ‘CSS‏ 


2- المرئيات: والمقصود بها طريقة إخراج 
الشاشة» وتنظيم العناصر الأساسية عليها من 
روابط وملفات الفلاش» وأماكن وجودها: في 
الجزء العلوي أو السفليء أو الأيمن أو 
الأيسرء وهذا الجانب أكثر الجوانب وضوحاًء 
لكنه ليس الأكثر أهمية. 





3 التكنولوجيا: والمرتبطة بالأسس التقنية لتصميم الصفحات من توفر لغات البرمجة مثل 
لغات ال HTML‏ وال (CSS‏ وبرامج ال 501101 JAVA‏ إضافة إلى البرامج المستخدمة 
في التصميم. 
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5- الغرض من الموقع والجمهور الذي سيوجه له: فالتصميم يجب أن يتلاءم مع 
الطبيعة الخاصة لهذا الجمهورء سواء كان من الكبار أم الصغارء ويتلاءم مع المضمون 


الذي يقدّم فيه سواء كان الموقع ذا مضمون إخباري أو رياضي أو ثقافي وغيره. 


القواعد والنصائح التي تفيد في تصميم موقع الويب: 
قدم العديد من المراكز البحثيةء والعديد من الممارسين والباحثين في حقل تصميم مواقع الويب مجموعة 
من القواعد والنصائح التي تفيد في تصميم موقع الويب وفق أسس علمية تواصلية وفنية جمالية ترتكز 
أساساً على التوظيف الأمثل لكل العناصر البنائية المستخدمة في تقديم محتوى صفحة الويب» وأهمها 
الوسائط المتعددة» واستخدامها استخداماً فعالاً مرشداً لتحقيق أكبر مرونة ممكنة في دخول الموقع والتنقل 
السهل بين مكوناته عبر الوصلات Interactive Links deuil‏ 
فقد توصلت إحدى الشركات المتخصصة في تصميم المواقع واستضافتها إلى مجموعة من النصائح عند 
تصميم المواقع لتحقيق أكبر نسبة زيارة ودخول مع الأخذ بالاعتبار ضرورة توظيف الوسائط المتعددة 
وتتلخص هذه النصائح ب: 
1- جعل النصوص التوجيهية وصفية» وتفادي تعليمات مثل: "انقر هنا". 
2- تفادي الجداول والأعمدةء وإذا لزم استخدامها فيمكن إرفاقها ببديل نصي بسيط GY‏ ال HTML‏ 
غير مزودة بتحكم جيد في إخراج الصفحات» الأمر الذي يضطر المصممين إلى تقديم الجداول 
في صيغة صورة مما يحد من سهولة الدخول إلى الموقع. 
3- استخدام عناوين اللافتات 1395 1830170]! بدل العناوين المكتوبة بخط عادي 1305 ‘Font‏ 
للإشارة إلى بعض المكونات البنائية للموقع» مثل: أسماء الأبواب والوصلات الرئيسية الثابتة. 
4- استخدام ألوان متباينة للنصوص وخففياتهاء كأن تكون الخلفية سوداء والنص أبيض تحقيقاً لأكبر 
قدر من الانقرائية .Readability‏ 
5 إذا قام المصمم بتصميم وثيقة ما وفق نظام الإطارات ۴۲2۳ء فيجب تقديم بديل خالٍ من 
الإطارات -No frames‏ 


6- إذا تم استخدام خريطة رسومية كمنفذ لتصفح الموقع» فيجب تقديم بديل نصي لتصفح الموقع. 
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7- تزويد الموقع بعنوان بريد إلكتروني» أو نموذج استمارة نصي 150150 Ag cia Text-based‏ 
للمتصفح خياراً يمكّنه من القيام بالتغذية الراجعة في إطار التفاعلية» وبخاصة أن بعض 
المتصفحات قد لا تدعم نماذج الاستمارات. 

8- إذا تم استخدام ملفات صوتية في الموقع يمكن إضافة وصلة تقود إلى مقابل نصي إن أمكن» 
واضافة وصلة لتحميل البرمجة اللازمة لسماع الصوت (مثJ .(RealAudio Player‏ 


رابعاً: الخطوط الإرشادية لتصميم مواقع وصفحات الويب: 


B 
وضع أحد الباحثين مجموعة من الخطوط الإرشادية لتصميم مواقع وصفحات الويب» وذكر أن قائمة‎ 


الإرشادات هذه ليست نهائية» وليست قابلة للتطبيق على كل أنواع المواقع والصفحات» لكنها تغطي 
معظم النقاط العامة والأساسية في عملية التصميم» وأن اتباع هذه الأساسيات سيمكن الممارسين 





والمصممين من تصميم مواقع محترفة عالية المستوى» وقد حدد هذه الخطوط الإرشادية في مجموعة من 
الأدوات المهمة في عملية التصميمء ومنها: 
أ- أدوات الإبحار أو التجول Navigation‏ 


في عملية التصميم ليس فقط الاهتمام ua paill‏ س T- Navigation‏ 





وجعلها قابلة للفهم والقراءة» ولكن الاهتمام أيضاً 
بأدوات الإبحار والتجول بين صفحات وموضوعات 





الموقع» وتزويد الموقع بأدوات إبحار واضحة وسهلة الاستخدام» لكي يتمكن المستخدمون من الوصول 
والاستخدام السهل والتنقل بين صفحات الموقع» وتلخص النقاط التالية الإرشادات المتعلقة بآلية وأدوات 


الإبحار: 


33 


1 - استخدام منهج واحد يتعلق بآلية الإبحار لكل صفحات الموقع» أي أن كل صفحات الموقع يجب 
أن تتضمن آلية وأدوات الإبحار نفستها. 

2- وضع شريط للأدوات في كل صفحة من صفحات الموقع؛ ويكون شريط أدوات الإبحار السفلي 
متسقاً من حيث المقاس أو العرض مع الشريط العلوي. 

3- أن يتضمن الهامش العلوي للصفحة الرئيسية اسم الموقع وعنواته. 

4- التأكد من أن موقع الويب قابل للإبحار فيه من أي صفحة من صفحات الموقع» لأن المستخدم 
قد يدخل الموقع من أي صفحة من صفحاته؛ وليس بالضرورة من الصفحة الرئيسية. 

5- أن تتضمن كل صفحة من صفحات الموقع على الأقل رابطاً واحداً للخروج من الصفحة؛ ويفضل 
تجنب الروابط التي توجه المستخدم إلى الصفحة الحالية نفسهاء وأن توضع أسفل كل الصفحات 
روابط العودة إلى أعلى الصفحة؛ ويفضل أن تحوي كل صفحة من صفحات الموقع رابطاً مع 
الصفحة الرئيسية بحيث ثرتب روابط العودة إلى الأعلى من المستوى الأقل إلى المستوى الأعلى؛ 
ومن اليمين إلى اليسار. 

6- أن تُعرض الروابط 10715أ-ا بألوان المتصفح الافتراضية المتعارف عليها لإبرازهاء وأن تكون 
الروابط الداخلية والخارجية واضحة. 


جديدة لمتصفح آخرء وأن توضح للمستخدم مضمون المكان الذي سيذهب إليه» بمعنى أن تكون 
الروابط ذات معنىء ويمكن توقع اتجاههاء ولا داعي لاستخدام انقر هنا (Click here)‏ 

8- تقليل gS L (Clicks ahal) aaia‏ ويفضل ألا يتجاوز عددها ثلاث النقرات على 
الصفحة الرئيسية ©5230 1026 ا. 

9- إظهار مسار كل صفحة من الصفحة الرئيسية. 

0- استخدام الشرائط والأزرار المناسبة» والتي لا تبطئ من سرعة التحميل. 

1- التأكد من أن المستخدم يمكنه التجول في الموقع من غير أن يستخدم باستمرار زر ال Back‏ 
وأن تكون هناك وسيلة أو طريقة للوصول إلى كل أجزاء الموقع بسهولة ويسر من خلال تمثيل 
أدوات الإبحار برموزء وأيقونات مفهومة وواضحة. 

2- تصميم صفحة رئيسية لكل جزء مهم ورئيسي من الموقع (مثال: الصفحة الرئيسية لموقع 
جامعة دمشق» والصفحة الرئيسية لكلية الإعلام في هذا الموقع). 
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3- استخدام إعادة التوجيه الفوري (gud Lees bye USA «(Redirect)‏ المستخدم على زر العودة 
83016 يعيده المتصفح إلى مكان غير مرغوبء لذلك يجب قصر الصفحة الرئيسية على 
4- الحد الأعلى لعدد شاشات صفحات الموقع لا يتعدى ست الشاشات. 
5- استخدام اسم الصفحة في كل صفحة من صفحات الموقع؛ وترتيب وتنظيم علامات شريط 
القوائم اعتماداً على أساس تكرار الاستخدام والأهمية» وأن يُدعم الهامش العلوي بأدوات إبحار 
مساعدة. 


Usability سهولة الاستخدام‎ =ü 
تتعلق سهولة الاستخدام بكيفية الاستخدام والوصول إلى المعلومات المعروضة على الموقع بيسر‎ 
وسهولة» وتوضح الخطوط الإرشادية المتعلقة بيسر الاستخدام القواعد الأساسية التي يجب اتباعها في‎ 
تصميم الموقع» والأخذ بعين الاعتبار الجمهور المستخدم لهذا الموقع» فقد تصلح هذه القواعد لكل أنواع‎ 
المواقع لكن يجب مراعاة بعض الاختلافات في مهارات وامكانات» وفي حاجات وأهداف الأفراد في‎ 

الاستخدام» ويمكن تلخيص الخطوط الإرشادية المتعلقة بسهولة الاستخدام فيما يلي: 

1- يجب أن تكون خريطة الموقع واضحة. 

2- تزويد كل صفحة بنصوص قصيرة معبرة عن مضمون المعلومات. 

3- تسهيل وتسريع عملية الوصول إلى المعلومات من خلال تزويد الموقع بفهرس. 

4- صياغة العناوين بشكل دقيق وواضح» واستخدام عناوين فرعية ذات معنى» وتوضيح الروابط 
واستخدام القوائم» والاعتماد على بنية تصميمية متماسكة. 

5- تجنب اللهجات العامية والمصطلحات المتخصصة» والألفاظ التي تحمل معاني خاصة:» باستثناء 
الألفاظ المتخصصة في بعض الموضوعات» واستبعاد الجمل الإنشائية المعقدة. 

6- كل صفحة من صفحات الموقع يجب أن تحمل عنواناً محدداً لهاء وهي صيغة العناوين نفسها 
في كل الصفحات. 

7- يجب أن تكون الفقرات التابعة للنصوص واضحة ومتسقة معهاء وأن تكون جزءاً منهاء وتقتصرَ 


على فكرة رئيسية واحدة وتحمل عنواناً معبراً عنها. 
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8- يفضل تزويد الموقع بخدمة الأسئلة المكررة FAQ‏ وخدمة المساعدة 1©10]. وخدمة البحث» 
ومحرك بحث خاص» وخدمة الترجمة إلى العديد من اللغات. 

9- إتاحة إمكانية عرض نتائج البحث بطريقة مفيدة» وتدعيم الموقع بإمكانية تصحيح الأخطاء في 
أثناء عملية البحث. 

0- تنظيم وترتيب قائمة الخيارات بفئات ذات معنىء واتاحة الوصول إليها في الموقع بواسطة 
أوامر لوحة المفاتيح» وتجنب الإشارة القائلة الصفحة تحت الإنشاء» وتجنب استخدام 
الإطارات. 

1- عدم استخدام شريط الزلق (الجانبي) من جانب إلى آخر لرؤية الصفحة» ووضع آليات تمكّن 
المستخدم من إلغاء أي عمليات ينفذها. 

2- دعم الموقع لكل المتصفحات المعروفة والمستخدمة» وتزويد الموقع بخدمات مباشرة من على 


الإنترنت. 


ج- الواجهة Interface & Style Jya gluis‏ 
تتضمن الخطوط الإرشادية المتعلقة بالواجهة وبأسلوب الوصول إلى المعلومات في الموقع الحلول 
المتعلقة بمشكلات الوصول إلى المعلومات» والتي يمكن أن يواجهها المستخدم في أثناء تصفحه للموقع؛ 
فبعض المستخدمين مثلاً لا يستطيعون استعراض الصور لأنهم يستخدمون المتصفحات التي تدعم 
النصوص فقطهء بينما يستطيع آخرون من خلال متصفحاتهم الابتعاد عنهاء ربما لأنها تبطئ من سرعة 
فتح الموقع وتحميلهء فهذه الخطوط الإرشادية لا تقترح مثلاً الابتعاد عن الصور لتسهيل الوصول إلى 
المعلومات بل تقترح تزويد النصوص بصور مكافئة لها حتى يمكنَ الوصول بسرعة إلى المعلومات»› 

ويمكن تلخيص القواعد والخطوط الإرشادية المتعلقة بهذه العملية» فيما يلي: 
1- دعم العناصر غير النصية في الصفحة (صوت - صورة - فيديو) بنصوص تعبر عنها 
وتوضحها باستخدام آلية (Alt: Alternative Text Attribute) ilal apail‏ والوصف 
الطويل للصıر .(Longdesc: Long Description ag)‏ 
2- عرض مخطط الصفحات المستخدم في التصميم. 
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3- استخدام الأرضيات البسيطة والخطوط الواضحة لزيادة انقرائية المعلومات» واختيار ألوان لخطوط 
النصوص والخلفيات الأرضية متباينةء والتأكد دائماً أن النصوص واضحة للقراءة» ولا تتعارض 
مع الخلفيات. 

4- التأكد من أن كل الصور قابلة للفهم والقراءة» وأن خلفياتها لا تصرف الانتباه وغير cgil ALG‏ 
والتقليل ما أمكن من الصور الصفراء أو البيضاءء لأنها صعبة الفهم وغير قابلة للطباعة» ومن 
استخدام الصور المتشابكة وغير الواضحة» واستخدام الدرجات الأقل من ألوان الصور. 

5- عدم استخدام ألوان مختلفة لأرضيات صفحات الموقع» إذ يجب أن تكون الألوان موحدة. 

6- عدم استخدام الحروف الكبيرة (في اللغات الأجنبية). 

7- استخدام أنواع الخطوط بحذرء وعدم استخدام أكثر من نوع في المادة الواحدة» والابتعاد عن 
Lalas‏ عون الشائسة: ن كرا من اقحات او اسر كات ل قغمها: 

8- الاعتماد على قياس أحجام الصور والرسوميات» والأعمدة النصية على القياس Pixel „häl‏ 
.Size‏ 

9- تزويد المعلومات بعناوين رئيسية أفقية وعمودية. 

0- تجنب الأشكال الغرافيكية والصور والرسوميات المتحركة» والتقليل من استخدام الإيقونات 
(الصورية والرسومية)» ومن استخدام النصوص (الرمشية أو الومضية: النصوص التي يضاف 
إليها مؤثرات حركية معينة فتهتز وتومض كرمش العين)» وتجنب صور الخرائطء والحرص 
على عدم ظهور الظلال. 

1- بالنسبة للألوان المستخدمة: 

o‏ يفضل استخدام ألوان الخلفيات البيضاء أو الدرجات الفاتحة جداً من الألوان الأخرى. 

o‏ عدم استخدام الخلفيات السوداء إلا في الصفحة الرئيسية. 

o‏ عدم استخدام اللون الأحمر مع الأزرق معاًء وعدم استخدام الصور الملونة بالبيج 
والبني. 

ه استخدام الألوان من العائلة نفسها (اللون ومشتقاته)» ويفضل أن يُستخدم اللون 


ومشتقاته في العناصر التي تجمعها علاقة ما. 
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د- الإجراءات القانونية والأمنية :Legality & Security‏ 
تتزايد أعداد مواقع الويب يوماً بعد يوم» وتزود هذه المواقع المستخدمين بمعلومات رئيسية أو ثانوية عن 
الوضع القانوني» وتخضع إلى إشراف العديد من المنظمات والشركات» والمؤسسات التعليمية» أو حتى 
الأفراد» ويتفاوت مستخدمو هذه المواقع بمستوى معرفتهم بالقانون والتشريعات القانونية التي تحكم إنشاءها 
ونشرٌ وتبادل المعلومات من خلالهاء ومن أجل أن تستمر هذه المواقع في تحقيق أهداف واحتياجات 
المستخدمين المتجددة يجب على مطوري ومصممي هذه المواقع أن يستمروا بحمايتهاء وحماية المعلومات 
المتبادلة عبرهاء وتشير الخطوط الإرشادية المتعلقة بالوضع القانوني والأمني للمواقع إلى مجموعة القواعد 
والحلول التي تحكمهاء ويمكن ذكرها فيما يلي: 
1- يعد المطورون والمصممون مسؤولين عن المعلومات القانونية الموجودة في كل صفحات الموقع» 
والمتعلقة بتفاصيل كاملة عن كيفية الاتصال مع الموقع والعنوان»ء ورقم الهاتف والفاكس» وعنوان 
البريد الإلكتروني للموقع. 
2- وضع بيانات تحديث المعلومات بشكل واضح. 
3- أن يتم إيضاح الوضع القانوني للمعلومات المرتبطة. 
4- أن يتم توجيه المستخدمين لتصفح أنواع من المواقع» أو مصادر المعلومات التي تحمل معلومات 
مرتبطة بالمعلومات التي يبحثون عنهاء وقد سبق أن قام المستخدمون بتقييمها أنها مهمة. 
5- أن يراجع الخبير المهتم بهذا المجال الوضع القانوني للمعلومات. 
6- أن يكون هناك إِذنٌ بالسماح لاستخدام المضمون من مزودين آخرين. 
7- إظهار مصدر المعلومات والبيانات في صفحات الموقع» وتنبيه المستخدمين أن الموقع ليس هو 
المصدر الوحيد للمعلومات» وبالتالي فإن مسؤوليته عنها محدودة. 
8- التعرف على طريقة حماية البيانات الشخصية ومعالجتها من قبل المستخدمين أنفسهم مع تقديم 
إمكانية الحفظ والتخزين لها بشكل قانوني. 
9- لا توضع الروابط مع المواقع الأخرى إلا بعد موافقة المواقع الأصلية التي تنتقل إليها هذه 
الروابط. 
10- عرض عبارة 'حقوق النشر محفوظة'. 
1- من الضروري أحياناً وضع آلية لدخول الموقع تتضمن اسم المستخدم وكلمة السرء ومن 
المفضل تزويد الموقع بآلية للمساعدة في حال نسيان اسم المستخدم أو كلمة السر. 
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ه - الاتصال والبنية )!450% :Communication & Infrastructure‏ 
يعاني الكثير من المستخدمين من عدم إمكانية 
تصفح مواقع الويب في كل الأوقات نظراً 
لمسؤولياتهم وكثرة مشاغلهم» لذلك يتصفحون 
مواقعهم المفضلة في منازلهم ومن خلال أجهزتهم 
الشخصية» وهنا تظهر العديد من المشكلات التي لا تستطيع سرعة الإنترنت أحياناً ولا تطور البنية 
القحية للاتضالات حَليا بالشكل الأمثل: لذا يمكن طرح مجموعة من الخطوظ الإرشادية المتاقة akg:‏ 
القضية» والتي يمكن ذكرها فيما يأتي: 
1- يجب ألا يتجاوز حجم الصفحة مع ما تتضمنه من رسوميات 50 كيلو بايت و20 ثانية كحد 
أقصى لتنزيل المعلومات والبيانات باستخدام (مودم) سرعته 28.8 كيلو بايت» (وقد انخفضت 
هذه الأرقام مع تزايد سرعات المودم ووصلت إلى 10 توانٍ). 


(RA) Se seats (a) ee الت‎ gee ee = 9 
صر‎ ê e صر‎ 





3- استخدام المساحة المخصصة للصفحة لعرض أقصى ما يمكن عرضه من معلومات. 

4- تصميم الموقع بحيث يتناسب مع كل أنظمة التشغيل. 

5- السماح للمستخدم بتنزيل الملفات والمعلومات باسم محدد منه إلى مسار يحدده بنفسه. 

6- تقسيم الوثائق والملفات والمعلومات الكبيرة وعلى أكثر من صفحة مع وضع قائمة بالمحتويات. 
7- تزويد المستخدمين ببدائل مختلفة لضغط الملفات. 

8- كل صفحة من صفحات الموقع يجب أن تُحمّل بسرعة. 

9- الحذر من ألا تسبب كثرة الروابط التشعبية المستخدمة في منع تنزيل الصفحات الكبيرة. 

0- استخدام الطابعات المشهورة والمعروفة لطباعة الصفحات» ولاسيما تلك التي تحمل 


الرسوميات. 
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:Marketing (3: 5ucl) — 5‏ 
تتناول القواعد والخطوط الإرشادية المتعلقة بعملية 
التسويق العديد من النقاط التي تساعد مطوري 
مواقع الويب على معرفة مستخدميهم» ومعرفة 


الوسائل التي تصلهم بهم وتتلخص هذه القواعد ب: 





1 - استخدام أكثر محركات البحث انتشاراً واستخداماً من قبل المستخدمين لزيادة سرعة الوصول إلى 
الموقع. 

2- الارتباط مع المواقع الأخرى التي تتشابه في المعلومات والموضوعات. 

3- استخدام آليات التسويق وأساليبه نفسها المستخدمة في وسائل الإعلام التقليدية (صحافة وإذاعة 
وتلفزيون)» والتأكد من أن عنوان الموقع موجود في أي عرض تسويقي للموقع أو أي إعلانات؛ 
مما يساعد على توفير معلومات أكثر لدى مشاهدي الإعلانات على الموقع. 

4- محاولة جذب انتباه المستخدمين والاستحواذ على اهتمامهم باستخدام المواد أو الإعلانات 
القصيرة» وربطهم بمعلومات تفصيلية أكثر عبر الروابط. 

5- يمكن استخدام العديد من الأساليب التسويقية والترويجية للتعريف بالموقع. 

6- تطوير وتقديم العديد من الخدمات التي تحتفظ بمستخدمي الموقع وقتاً أطول مثل: 

» وضع الروابط مع العديد من المواقع ونشر الأخبار. 

« معرفة العناوين الإلكترونية للمستخدمين» واستئذانهم في إرسال آخر وأحدث الأخبار 
والمعلومات» وإتاحة التوقيع الإلكتروني عبر البريد الإلكتروني. 

o‏ طرح المسابقات. 

o‏ وضع الإعلانات الشريطية. 

ه التعرف إلى رأي المستخدمين بالموقع وخدماته. 

@ تقديم خدمة القوائم البريديةء والمجموعات الإخبارية. 


© وضع عدادات إحصاء Jac‏ زوار الموقع. 


40 


i 
i Learn to Create Websites ETT TTT 
. 
P ~ : ١ 
م‎ i 
د حم مده كم‎ : 
Es ` 

wS 

0 ' 
— 

لصيس جور nr r‏ 2 
ها ا دع 

r= 

م 

' 


1 agie Se e 
نسب بسحي زه‎ 
ion Giten-Free Menu - No Ga 


ز- الدلالة على :Semantic edge)‏ 

يحتوي الإنترنت حتى هذا الوقت عشرات الملايين 
من المواقع» ولا تحظى هذه المواقع بالرقابة أو 
الضبطء ولكي يصل المستخدمون إلى هذه المواقع 
يستخدمون محركات البحث المتعددة العامة 
والمتخصصة؛ كمحرك البحث ©0001 Yahoo,‏ 


وغيرها من المحركات العامة» Lal‏ إذا أراد المستخدم 


البحث عن معلومات متخصصة ودقيقة» فيبحث في العديد من محركات البحث المتخصصة عن مواقع 
متخصصة حسب مجال التخصص: العلمي أو العسكري أو التعليمي أو غيره» وهو ما يجب أن توفره 
مواقع الويب لمستخدميها لفهم آلية الوصول إلى المواقع» إضافة إلى إمكانية إحالتهم إلى محركات البحث 
التي توصل إلى محركات بحث أخرى يمكن أن تحوي المعلومات المطلوبة للمستخدمين. 

















:Errors ¢Uay\ —¢‏ 
قد يحدث ألا يتمكن المستخدمون من الوصول إلى 
المواقع التي يبحثون عنهاء وقد يرجع السبب إلى 
أن هناك خطأ ماء ويحصل هنا أن تظهر رسائل 
Glul Gut‏ هذه الأخطاء ‏ وطرائق. حلهاء 
والخطوط الإرشادية التالية تحاول عرض هذه 


المشكلة وطريقة ها 


1 - كتابة رسالة الخطأ بطريقة واضحة ومفهومة من أغلب المستخدمين. 


هذا الخطأ. 


2- أن توضح وتصف رسالةٌ الخطأ أسباب 


3- أن توضح وتصف رسالة الخطأ التصرف اللازم للتخلص من هذا الخطأ. 
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4- أن تعطي المستخدم نقطة خروج واضحة. 
5- يُستخدم الصوت للتحذير من الخطأ. 
6- أن يحذر نظام تشغيل الموقع المستخدمين إذا ما كانوا سيُقبلون على ارتكاب أخطاء iima‏ 


وبالتالي أن يحميّهم ويمنعهم من ارتكابها ما أمكن ذلك. 


ط- الاختبار والتجريب :Testing‏ 
يعد اختبار تصميم موقع الويب مرحلة 
مبكرة ومهمة في عملية التصميم» فمن 
خلالها يمكن تحديد وتقييم هذه 
العمليةء والوقوفت على المشكلات 
التي يمكن أن تظهر في أثناء 
الاستخدام» فالتجربة والاختبار يمكن 





أن تؤكد أن بناء وتصميم الموقع تم بشكل منطقي ودقيق» ويمكن تلخيص أبعاد التجريب 
خلال طرح الأسئلة التالية التي توجه للمستخدمين» ويسعى المطورون والمصممون لهذه المواقع إلى 
الحصول على إجابات دقيقة حولها: 
1 - هل يحصل المستخدمون على المعلومات بسهولة؟ 
2- ما مدى وضوح وتناسق وفعالية أدوات الإبحار في الموقع؟ 
3- هل يتم تحميل الصفحات بسرعة تتناسب مع أغلب سرعات المودم؟ 
4- هل يستطيع المستخدمون معرفة من أنشأ هذا الموقع؟ وهل يجدون عنوان البريد الإلكتروني 
للموقع للاتصال في حال وجود صعوبات أو مشكلات في الاستخدام؟ 
5- هل تظهر للمستخدمين جميع العناصر المرئية في الصفحة دون زلق الشاشة أو الانتقال من 
جهة اليمين إلى جهة اليسار؟ 
6- هل يستطيع المستخدمون تصفح الموقع من خلال متصفحات مختلفة؟ 


7- هل يجد المستخدمون نصوصاً بديلة للصور والرسوميات الموجودة في الموقع؟ 


والاختبار من 


02 


8- هل ترتبط الروابط بعناوين الصفحات التي تتعلق بها؟ وهل تم التأكد من فعالية الروابط الداخلية 
أو الخارجية؟ وهل تم تلوين الروابط الداخلية بالألوان القياسية المعروفة: الأزرق في حال عدم 
زيارتهاء والأحمر في حال زيارة هذه المواقع؟ 

9- هل يحمل عنوان الصفحة مضموتها لتسهيل التعرف عليها؟ 

0- هل يقدم الموقع للمستخدمين المعلومات التي يحتاجون إليها وتشبع رغباتهم وتحقق أهدافهم؟ 

1- هل وفر الموقع للمستخدمين الخدمات التي يحتاجون إليها: خدمة البحث في الموقع» وخدمة 


المساعدة وعنوان البريد الإلكتروني» hes‏ من الخدمات؟ 


:Evaluating Websites qug) gëlga anii — s 
إن تراكم الخبرات الناتجة عن دراسة مواقع الويب‎ 
من حيث مدى ثباتها وسهولة دخولها وأدائها‎ 
كوسيلة تواصل قابلة للتلقي أدى إلى مجموعة من‎ 
يمكن استخدامها لتقييم‎ (All Criteria المعايير‎ 
مواقع الويب تقييماً علمياً يتسم بالموضوعية‎ 


المستمدة من أسس علمبة وفنية» 


5 
T 





فقد اقترح Heinze‏ أع»!11ن) و Cornelia Brunner‏ مجموعة من المعايير لتقييم مواقع الويب: 
1- على مستوى الشكل !100: مظهر الموقع والشعور الذي يولده عند رؤيته» والخطوط Fonts‏ 
والخلفيات والألوان والصورء ومدى توافقها مع المظهر والشعور. 
2- على مستوى الإخراج 1لا0/ا2ا: تنظيم الموقع وثباته من صفحة إلى أخرى» وسهولة قراءة كل 
صفحة» والحصول على المعلومات منها. 
3- عناصر الوسائط 167761015 11©013: وجود الصور والصوت والرسوم المتحركة» ودعم 


محتوى الموقع. 
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4- تصفح الموقع ggal Jah dail seu Navigation‏ ووضوح تنظيمه من خلال الصفحة 
الرئيسية» ووجود خريطة للموقع» ومعرفة الوصلات» وتعدد أدوات الإبحار» ووضوح الأيقونات 
المستخدمة وما تمثله: 


لقد تجاوز اهتمام الباحثين في تقييم مواقع الويب مجرد اقتراح مجموعة من 

المعايير إلى تصميم استبيانات لدراسة مكونات موقع الويب وقياس مدى 
aa gag Consistency ailà‏ هذه الجهود: 

« الاستبيان الذي صمم لقياس تبات الواجهة الذي بالرغم من أنه 

يركز في الأساس على قياس الجوانب النصية في مواقع الويب» - = 

إلا أنه يخصص نحو ثلث أسئلته للبناء التصميمي. ع 


0 الاستبيان الذي وضع قائمة لتحليل دوافع استخدام مواقع الويب» 








والتي تقوم على فرضية أن الجودة الدافعية " motivational‏ 
۷ تحث زائر الموقع على معاودة الزيارة. 
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a 


الخاتمة 
يعطي التصميم الانطباعَ الأولي عن الموقع الإلكتروني» فإذا استطاع أن يخلق لدى المستخدمين انطباعاً 
جيداً وجذاباً انتقلوا إلى المرحلة الثانية وهي تصفح الموقع» وقد توصل المطورون والمصممون سواء من 
خلال خبراتهم العملية في التصميم أو من خلال دراستهم لتأثير تصميم هذه المواقع على المستخدمين» 
للعديد من قواعد التصميم التي قد لا تتناسب مع كل أنواع مواقع الويب وصفحاته نظراً لاختلاف أهدافها 
وامكانياتها وجمهورها المستخدمء لكنها تتناسب مع أغلبهاء ويمكن في حال الأخذ بها الوصول إلى مواقع 
ملائمة ومناسبة للوصول بسرعة إلى المستخدمين وتيسير وصولهم إلى المعلومات التي تتفق مع حاجاتهم 
واهتماماتهم» وقد تكون القاعدة الأولى التي يجب أن يتنبه لها المصممون ولم ثذكر في القواعد السابقة 
أن جمهور المواقع الإلكترونية ليس صبوراًء ولديه خيارات متعددة من المواقع والصفحات على الإنترنت» 
لذا فإن النظرة الأولى التي يلقيها على الموقع هي التي ستقرر فيما سيستمر في التصفح أم لاء وبالنسبة 
لأصحاب المواقع يجب أن يكون القرار: نعم» سأستمرء وسأكرر الزيارة. 
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الخلاصة 


يحقق تصميم مواقع الويب وظيفتين مهمتين: الوظيفة الجمالية وجذب انتباه المستخدمين والاحتفاظ بهم ما 
أمكن» ووظيفة تسهيل الاستخدام للوصول للمعلومات بيسر وسهولة. 


وقد قدم العديد من المراكز البحثية والكثير من المصممين والمطورين لمواقع الويب تعريفات مختلفة 
للتصميم» يركز معظمها على أنها عملية ترتيب وتنظيم العناصر البنائية لصفحة الويب لتسهيل 
استخدامهاء وجذب الاهتمام إليها. 


وقد قدمت هذه المراكز وهؤلاء المصممون أيضاً العديد من القواعد والخطوط الإرشادية التفصيلية المتعلقة 
بالعديد من أبعاد التصميم» كأدوات الإبحار وسهولة الاستخدام» والواجهة وأسلوب الوصولء والإجراءات 
القانونية والأمنية» والاتصال والبنية التحتية» والتسويق والدلالة على الموقع» والأخطاء والاختبار 
والتجريب» وأخيراً تقييم مواقع الويب. 

وقد ركزت هذه الخطوط بشكل عام على سرعة تحميل الموقع» واستغلال مساحة الشاشة بالشكل الأمثلء 
لعرض الكم الأكبر من المعلومات» ووضوح وسهولة استخدام أدوات التجول والإبحار» وسهولة ووضوح 
المعلومات» والروابط وارتباطها بحاجات المستخدمين وأهدافهم» واستخدام الخطوط والألوان المناسبة 


واستغلال كل العناصر التي تساعد على يسر استخدام هذه المواقع من غير مبالغةء ولا مغالاة. 
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التمارين 
اختر الإجابة الصحيحة: 
1-حجم أي صفحة من صفحات موقع الويب يجب ألا يتجاوز: 
6. 20 كيلو بايت. 
6. 25 كيلو بايت. 


.C‏ 45 كيلو بايت. 
.D‏ 50 كيلو بايت. 


الإجابة الصحيحة: 0 50 كيلو بايت 


2حمن القواعد والخطوط الإرشادية المتعلقة بالأجراءات الأمنية والقانونية: 


. عرض عبارة 'حقوق النشر محفوظة". 
. استئذان صفحات المعلومات التي سيتم الارتباط بها. 

. القدرق على الإزشادات المقلقة ينشن المعلومات الشخصية والخاصة: 
٠‏ كل ما سبق صحيح. 

ABS Gusta dss 


m o oO WD > 
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3-من المفضل أن تُعرض صفحة الموقع على شاشات لا تتجاوز خمس الشاشات. 
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هيع 
8. خطأ 


الإجابة الصحيحة: 8 خطأ 


4-زر 8301 من أهم أدوات الإبحار. 


۸. صح 
8 خظأ 


الإجابة الصحيحة: ۸ صح 


العراجع 
dhad iie‏ (2010)ء الإعلام الإلكتروني» (ط1)» الأردن» دار أسامة للنشر والتوزيع. 
تربان» ماجد سالم» )2008( الإنترنت والصحافة الإلكترونية 'رؤية مستقبلية",» (ط])» القاهرة» 
الدار المصرية اللبنانية. 
شفيق» حسنين» (2010)» الوسائط المتعددة في المجال الإعلامي والإنترنت» (ط1)» القاهرةء دار 
فكر وفن للطباعة والنشر والتوزيع. 
يحيى الميتمي» معين صالح» (2009)» تفضيلات مستخدمي الإنترنت لتصميم المواقع الإخبارية 
العربية» رسالة ماجستير غير منشورة» جامعة القاهرة» كلية الإعلام» قسم الصحافة. 
موسى أحمدء محمد الأمين» )2005( توظيف الوسائط المتعددة في الإعلام الإلكتروني العربيء 
مؤتمر صحافة الإنترنت: الواقع والتحديات» جامعة الشارقةء كلية الاتصال. 
مصطفى حسين» محمدء (2010)» تقييم جودة المواقع الإلكترونية: دراسة تحليلية مقارنة بين 
بعض المواقع العربية والأجنبية» مجلة تكريت للعلوم الإدارية والاقتصاديةء المجلد 6» العدد 18. 
درويش اللبان» شريف» (2007)» الصحافة الإلكترونية» دراسات في التفاعلية وتصميم المواقع» 
القاهرةء الدار المصرية اللبنانية. 


محسب» حلمي» )2007(« إخراج الصحف الإلكترونية على شبعة الإنترنت» )14(« القاهرة» دار 


ا 
عمان» دار وائل للنشر. 


-1 
=2 


-3 


0- جودة محمد مؤيدء هيثم» (2010)» تأثير الأساليب الإخراجية للصحف الإلكترونية على 


العمليات الإدراكية لدى عينة من طلاب الجامعة» في إطار نظرية تمثيل المعلومات» دراسة شبه 


تجريبية» رسالة دكتوراه غير منشورة» جامعة المنصورء كلية التربية النوعية» قسم الإعلام التربوي. 


1- فتحي محمد رزق» منارء (2009)» تصميم المواقع الإلكترونية للصحف المصرية على شبكة 


الإنترنت» دراسة مقارنة في التقنيات والقائم بالاتصال والجمهورء رسالة دكتوراه غير منشورة» 
جامعة القاهرة» كلية الإعلام؛ قسم الصحافة. 
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12- Jarrar, Suba, (2002), Web Design Guidelines, For WSDM, Dissertation 
Submitted in View of Obtaining a degree of Master Science in Computer 
Science, Vrije Universiteit Brussel, Dep.of Computer System. 

13- Beaird, Jason, (2010), The Principals of Beautiful Web Design, (2.Ed), 


Canada, Site Point Pty Ltd. 
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الوحدة الثالثة 


الأهداف التعليمية 
بعد دراسة هذه الوحدة التعليمية يجب أن يكون الطالب قادراً على أن: 


HTML: Hypertext Markup Language exis cp 1 
PHP: Personal Home Page يشرح برنامج‎ 2 

XML: Extensible Markup Language يشرح برنامج‎ -3 
JAVA یشرح برنامج‎ -4 

JAVA Script elie يشرح‎ -5 

ASP: Active Server Pages gel: يشرح‎ -6 

CSS: Cascading Style Sheets جaliڊ شرح‎ -7 
Coral Draw gly zpi -8 

3DS Max Studio aÝ) AA auli liy goi -9 
Flash $d يشرح برنامج‎ -0 

1- يشرح برنامج 279906 Front‏ 


Adobe Dreamweaver qaliy: ¢ dy -2 
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العناصر: 
- مقدمة. 
- برامج تكوين وتصميم موقع أو صفحة الويب: 
- البرامج المتعلقة بتصميم صفحات الويب: 
HTML: Hypertext Markup Language e‏ . 
.PHP: Personal Home Page e‏ 
.XML: Extensible Markup Language e‏ 
JAVA e‏ 
JAVA Script e‏ 
ASP: Active Server Pages e‏ 
- البرامج المتعلقة بمعالجة النصوص والصور والرسوم: 
.Coral Draw e‏ 
.3DS Max Studio e‏ 
.Photoshop e‏ 
.Flash  e‏ 
.Front Page e‏ 
.Adobe Dreamweaver e‏ 


اخائمة. 


- الكلمات المفتاحية: الموقع الإلكتروني - التصميم - الوسائط المتعددة - النص المتشعب‎ 
JAVA Script — XML — PHP — JAVA - 811/1 - الروابط - برامج التصفح - لغات البرمجة‎ 
— Front Page — Flash — Photoshop — 3DS Max Studio - ASP — Coral Draw — 


.Power Point 3| gst — Words J| جaliرı‎ - Adobe Dreamweaver 
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أولاً: مقدمة 


Google Does 
Office MUMYA © 
Office | | 


أدى استخدام لغات ونظم تصميم البرامج على الكمبيوتر والشبكات إلى زيادة سهولة استخدام وتبادل ونقل 
البيانات» وتنظيم عملية الكتابة والتحرير على صفحة الويب» كما أدى إلى توحيدها وفق أسس محددة. 

قد أدى هذا التطور في لغات التأليف وتصميم المواقع والصفحات إلى إتاحة برامج متخصصة لكل 
استخدامات الكمبيوتر والشبكات» وتحقيق أهدافها الاتصالية» وكان أقربّها إلى الاستخدام: 


« البرامجٌ التي أطلقتها شركة 1110005016 لتنظيم استخدام أدوات الاتصال كالمحادثة أو البريد 
الإلكتروني» والحوار والمؤتمرات» وكذلك الأدوات المساعدة على التصميم كبرنامج تنسيق 
Power Point oas) Gaii alias Words SLIKI‏ وغيرها. 

« لغات تصميم الصفحات مثل لغة ال ا11« ولغة JAVA & JAVA Jl «PHP JI, XML JI‏ 
ASPK J ål, «Script‏ وغيرها من اللغات التي جاءت بديلاً عن لغات البرمجة التي 


صاحبت نشأة صفحات الويب مثل )42 )1 JI; Basic‏ 5950681 وغيرها من اللغات. 


« برامج معالجة الصور والرسوم كبرامج: «3DS Max Studio, .Coral Draw‏ 
piss «Front Page ; «Flash, «Photoshop ;‏ التعرض إلى كل هذه البرامج بالتفصيل في 
هذه الوحدة. 
وقد شهدت السنوات الأخيرة تنافساً كبيراً بين الشركات الصانعة للبرمجيات» مما ساعد على فتح مجالات 
واسعة لإيجاد برمجيات متقدمة في مجال تصميم العناصرء والوحدات الإلكترونية» ومن مصممي 
الصفحات الإلكترونية من تقديم أشكال إخراجية متنوعة للصفحات الإلكترونية. 
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وتنقسم البرمجيات المستخدمة في تصميم الصفحات الإلكترونية إلى قسمين: الأول يتعلق بتصميم 
صفحات الويبء والثاني يتعلق بالوسائط المتعددة المستخدمة. 


ثانيا: البرامج المتعلقة بتصميم صفحات الويب 


HTML CSS JAVASCRIPT 


EU 


أغراض هذه اللغات واستخداماتهاء كما تتشابه — 
Php) ASP... 8‏ 
أيضا فيما بينها من حيث الأغراض التي تؤديها ‏ == 


إلا أنها تختلف من حيث طرق البرمجة المستخدمة في كل منهاء ومن هذه اللغات ال ا١17‏ وهي اللغة 


أدت التطورات المتلاحقة إلى ظهور العديد من 


لغات تصميم الصفحات الإلكترونية» وتتعدد 





الأشهر بين اللغات» كما أن هناك لغات تتفاوت من حيث حجم الشهرة والاستخدام متثل لغات ۴٣۴۳ء‏ 


Oracle ; «ASP; «CSS ,‏ و XML‏ و avaل‏ » Java Script‏ وغيرها. 


HTML: Hypertext Markup Language -Í 


s 
. 2 5 i 5 wile 

وهي أولى اللغات المستخدمة في تصميم الصفحات 
<form octiore http://www .wikipedia.org/secrch-redirect .php” ide"secrchforn’>‏ 
Be 4 yI‏ أ fieldset style-"torder: ipx solid S220020; background-color: P999; padding | 5 il 5 | La’ j la‏ 
£ رولب واسهرهد وأكدرد 6 فدهي ع ی <input type="text” nane="search” size="28" ide"searchingut® styles*vertical-ol‏ 
aelect rome." longange” styles"vertical-clign: top; padding: 0; sargin: © 0.4‏ 
<ption volue="Ge" lange"Ge" xml slang="de"Deutsch</cpt ton> a e v y “ \ \ * ww le‏ 
اللغات | وا oe‏ ¢ 9 تحتاج | مدرجم <option velute"en” lange"en” xml slange"en” selectece "selected" sing! ish</opt ton‏ 
«potion valuds"ês" Lang="ês" allang" es Espoo 1 </p>‏ 
apotion volun "fr" lange"fr" xal :longe"fr">Frarçois</opt Of‏ 
ë‏ :۳ 3 5 و + . <option values"it* lange"it* xml :langs"it*>ital tan</opt tore‏ 
خاص بهاء وعير مرتبطة بنظام تشغبل معیں »2 اذ <option volute’nl* Lange*ni* xml slange"nl "Neder lands</opt ion>‏ 
aotion woluse"jo" Long«" jo" xal :long«"jo">B KB c/opt {oro £ 5 57 7 * ii 5‏ 
<ption volue="pl" lange"pl" xml slangs"pl">Polski</options‏ 
<option voluce"pt* lange"pt” wml slange"pt">Portugués</options‏ 

= 0 


s 
۴ j 5 ا“‎ \ e ae | tar ” 

<ption velute"ru” Lange*ru” cml c lange" ru" >Pyccamn</ept tone | . 2 â 

aption voluts"sy" lange"sy" xml slange"sv">Svershac/opt ton ¢ يي‎ : UA يدم لفسدره 9 = يمالها‎ 


</select> 

3 
<irout types" sibat" nomes"go" volute” > * closse"searchBAton” styles*verti 1990 rE ‘ - “t = ta 
<irgut type="higden” names"go" value="Go" /> alc للإنترنت» وقد اخترعت هده اللغة‎ 
</fteldset> 
</form> 





من قبل oag e Tim—Berners Lee‏ ليست لغة برمجة بالمعنى والشكل المتعارف عليه للغات البرمجة 
الأخرى» فمثلاً لا تحتوي على جمل التحكم والدوران» وعند الحاجة إلى استخدام هذه الجمل يجب تضمين 


شيفرات من لغات أخرى كلغة ال Java Script I, Java‏ كذلك لا تحتاج إلى مترجم خاص بها 
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Compiler‏ وغير مرتبطة بنظام تشغيل معين لأنه يتم تفسيرها وتنفيد تعليماتها مباشرة من قبل متصفح 
الإنترنت وبغض النظر عن النظام المستخدم. 

وتستعين ال HTML‏ - كما سبق ذكره - ببعض اللغات المساعدة مثل (All Java Script J)‏ تقوم 
بوضع بعض الخدع والمؤثرات والتحسينات في الموقع» كذلك تستعين بلغة ال 055 لمزيد من السرعة 
في خلق الصفحات وتنسيقها. 

Tia Ld p ba ذد الله عن مج هة من الصفحات النتصلة‎ punky 
وتضم‎ «World Wide Web تشكل في مجملها صفحات شبكة الإنترنت‎ 
النتصوص والصورء وملفات الصوت وبرامج أخرى» كما تساهم هذه‎ 
E اللغات في إضافة الكثير من الأبعاد التفاعلية لتصميم الصحف‎ 
الإلكترونية حيث يمكن من خلال هذه اللغة دعم خاصية النصوص‎ 
التشعبية» إلى جانب عدم اقتصار هذه اللغة على نظام تشغيل معينء ولذا‎ 
فهي لا تتطلب برامج لتحرير النصوص الخاصة بهاء فيمكن من خلال‎ 
بعض البرمجيات المتوافرة في أي جهاز حاسب التعامل معها مثل برنامج‎ 














Front Page‏ أو حتى برنامج ال a Word‏ يمكن من خلال هذه البرامج تصميم صفحة إلكترونية 
HTML ih‏ إذ لا يتطلب الأمر سوى: 
o‏ حفظ الملف بالامتداد ١ا۳‏ أو ۸۳ فقط. 
o‏ ثم العمل على توزيع الصور والرسوم» والنصوص على الصفحة دون الحاجة إلى الترميز ووضع 
الشفرات» فكل هذا يمكن أن تقوم به تلك البرمجيات مباشرة. 


وتمد لغة ال ا1۲ المصممين والمطورين بالعديد من الأوامر التي تجعل من التصميم عملية جذابة من 
خلال إمكانية تجميل خطوط النصوص التي تحتوي عليها الصفحة سواء من حيث نوع الخط أم حجمه أم 


لونه أم شكله (سميك - مائل - مرتفع - منخفض..) أم مكان الحرف. 
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<plugin name="introimage" url="viveros-iris-virtual-tourdata/graphics/introImage.png" align="center" onclick=" 
<action name="hideintroimage"> 
if(plugin[introimage].enabled, set(plugin[introimage] .enabled, false) ;tween(plugin[introimage).alpha, 6.0, 
</action> 
<action name="autohideintroimage"> 
if(plugin[data] .introImageHasBeenPlayed==false, set(plugin[introimage)].alpha,0); tween(plugin[introima 
delayedcall(10, hideintroimage() ); 
set(plugin[data] .introImageHasBeenPlayed, true) ;); 
</action> 
<|] FFE EEE EERE ESE Logos SHEE EE HEE EE EE EE EE EE EE EEE EEE EEE EEE EEE EEE EAE EEE EEE EEE EEE EE > 
<plugin name="logo4" onhover="showtext(Website);" url="viveros-iris-virtual-tourdata/graphics/logo4.png" keep: 
<plugin name="logo6" url="viveros-iris-virtual-tourdata/graphics/logo6.png" keep="true" align="leftbottom" x=" 
<plugin name="logol" onhover="showtext(Website);" url="viveros-iris-virtual-tourdata/graphics/logol.png" keep 


<| - -** + + + + + + » + + » + * Lensflares FER IEE EH EE EE EE EE EEE HE EEE EEE EEE EEK HEE EEE EERE EEE US 
<lensflareset name="DEFAULT" url="viveros-iris-virtual-tourdata/graphics/flares.jpg"/> 

ca] KKK Menu EE EE EE EE AE RE EE SE HE RE EE EE EE EE EE EEE EEE EE EE EEE EEE EEE US 

<plugin name="in" align="bottom" height="prop" keep="true" ondown="set(fov_moveforce,-1);"  onhover="showtext( 


<plugin name="out" align="bottom" height="prop" keep="true" ondown="set(fov_moveforce,+1);" onhover="showtext ( 
<plugin name="left" align="“bottom" height="prop" keep="true" ondown="set(hlookat_moveforce,-1);" onhover="show 
<plugin name="right" align="bottom" height="prop" keep="true" ondown="set(hlookat_moveforce,+1);" onhover="sho' 
<plugin name="“up" align="bottom" height="prop" keep="true" ondown="set(vlookat_moveforce,-1);" onhover="showte 
<plugin name="down" align="bottom" height="prop" keep="true" ondown="set(vlookat_moveforce,+1);" onhover="show 
<plugin name="home" align="bottom" height="prop" keep="true" onclick="lookto(get(panoview.h),get(panoview.v),g 
<plugin name="openfs" align="bottom" blendmode="normal" customColor="true" height="prop" keep="“true" onclick= 
<plugin name="closefs" align="bottom" blendmode="normal" customColor="true" height="prop" keep="true" onclick 


<plugin name="info" align="bottom" customColor="true" height="prop" keep="true" onclick="displayHelp();"  onh 
<plugin name="helpScreen" align="center" customColor="true" keep="true" onclick="closeHelp();" url="viveros-ir 
<action name="displayHelp"> 

set (plugin[helpScreen].visible, true) ; 

set(plugin[info] .onclick, closeHelp();) 
</action> 


<action name="closeHelp"> HTML ds} 389 danas صفحة ويب‎ 


set(plugin[helpScreen].visible, false); 
set(plugin[info] .onclick,displayHelp();) 
</action> 


PHP: Personal Home Page - 


ظهرت هذه اللغة للمرة الأولى عام 1995 على يد الدانماركي Rasmus Lerdorf‏ وكانت اختصاراً ل 
«Personal Home Page‏ أما الآن فقد أصبحت «PHP: Hypertext Preprocessor iaia‏ 
وقد أنشأها المبرمج بداية لتحل محل مجموعة من البرامج 56/1015 المكتوبة بلغة Perl‏ وقد استخدم ال 
۴ لأداء مهام مثل عرض سيرته الذاتية على الإنترنت» وتحديد عدد الزيارات التي كانت تتم لهاء ثم 
تطور الأمر بعد ذلك بشكل سريع ومتلاحق عندما انضم إليه مطورون آخرون أضافوا إضافات مؤثرة 


جداً للغة الجديدة جعلتها تنتشر بسرعة على نطاق واسع وتلقى دعماً متزايداًء وما ساعد على ذلك أنها 


مفتوحة المصدر ومجانية. 


Web cus) البرمجة المستخدمة في إنشاء تطبيقات‎ GLI واحدة من أشهر‎ PHP J ia, 


.Applications 
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ميزات وفوائد لغة ال :PHP‏ 

1. هي من اللغات التي يقوم خادم الويب !©5617 اعلالا بتفسير وتنفيذ الكود الخاص بهاء ثم يرسل 
النتيجة ليتم عرضها في متصفح العميل» ولأن ال Web Server‏ هو الذي يفسر وينفذ الكود 
الخاص بها لذا يطلّق aal Ja Ai à gi Server-Side Scripting Language kye‏ 
Java Server Pages-JSP, «Ruby, Python, «Perl, ASP.net‏ ولكنها تتفوق 
عليهم جميعاً من حيث أنها الأوسع انتشاراً. 

2. لغة ال ۴١۶‏ تستخدم لإنشاء صفحات ويب ديناميكية أي صفحات متغيرة المحتوى» وهذا 
المحتوى يتغير نتيجة التفاعل مع المستخدمء وبناءً على المعايير التي يحددها هوء كما هو 
الحال في مواقع التوظيف عبر الإنترنت والتي توفر لمستخدميها القدرة على تسجيل بياناتهم بها 
وتعديلها في أي وقتء وإلغائها إذا أرادواء كما أنها تعرض للمستخدم الذي يبحث عن وظيفة 
معينة نتائج تتوافق مع المعايير التي حددها عند البحث» وكما هو 24( facebook.com aise‏ 
حيث تتغير بيانات المستخدم المعروضة فيه وقائمة أصدقائه» وربما مظهر الصفحات 
المعروضة» وكذلك الإضافات المستخدمة بتغير المستخدم نفسه؛ إذاً فلغة ال 5115 هي لغة تتيح 
التفاعلية للمواقع الإلكترونية» لذا عمدت العديد من الصحف الإلكترونية إلى استخدام هذه اللغة 
في تصميم مواقعها للتغلب على الصعوبات التي يؤدي إليها HTML 4a) plastid‏ التي لا تتيح 
فرصة تحديث محتويات الصحيفة الإلكترونية إلا بعد أن يعمل المصمم على تحديث 
الموضوعات بشكل دوريء وبطريقة تقليدية» وذلك من خلال: 

« القيام بتصميم الصفحات المطلوبة. 
o‏ ثم إجراء بعض التعديلات على الصفحات الرئيسية للصحيفة. 
o‏ ثم القيام بتحميل الصفحات من جديد. 
وبذلك يمكن من خلال استخدام لغة PHP‏ لمواقع الصحف الإلكترونية التعرف على آراء القراء. 

3. تتميز لغة ۴۳١۴‏ بكونها اللغة التي يفهمها العديد من المتصفحاتء ولذا فهي لا تحمّل حاسوب 
زائر الموقع بأي أعباءء إضافة إلى أن هذه اللغة توفر مرونة عالية في البرمجية لا تتوافر في 
اللغات الأخرى il Java Scripty (HTML Jia‏ تعمل على حاسوب زائر الموقع. 
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4. تتعدد فوائد هذه اللغة حيث يمكن الاعتماد عليها في عمل قوائم المراسلات البريدية والبريد 
الإلكتروني» ولذا تعتمد لغة 5112 إمكانية التعامل مع محركات البحث التي تتيحها الصحف 
الإلكترونية للتعرف على الأخبار والموضوعات التي تم نشرها في أعداد سابقة. 

وقد تطورت هذه اللغة بشكل كبير حيث صدر منها نسخ متعددة» منها الإصدار الرابع PHP4‏ الذي 


يحتوي على تقنية تسمى 26100 التي تساعد على تسريع الصفحات المعتمدة على هذه اللغة. 


XML: Extensible Markup Language -g 


تعد ال االاكا من اللغات الشائعة حالياً لبناء قواعد المعلومات والمواقع الإلكترونية ذات السعة الكبيرة 
وقد تجاوزت هذه اللغة بعض المشكلات الموجودة في بعض لغات الإنترنت وخصوصاً لغة 7101لا 
ويستفاد منها في: 

٠‏ إعداد البيانات والروابط الخاصة داخل الموقع 


وبشكل عام فإن لغة 11/1 هي لغة لوصف البيانات وهيكلتها على الإنترنت بحيث يمكن من خلالها 


الاستفادة من هذه البيانات» والبحث فيها والحصول منها على المعلومات» ويمكن تحديد فوائد ومهام هذه 
اللغة في: 


1[ - تخزين البيانات: 


تقوم وسوم 1/اا بمعالجة محتويات المستند من المعلومات بعيداً عن وسوم 111/1! التي تقوم بعرضها 
على المستعرض؛ لذلك يصبح بالإمكان تخزين تلك المعلومات في ملف مستقل يُطلق عليه ملف -االاكاء 
وكتابة تعليمات عرض تلك المعلومات في المستعرض في ملف آخر هو ملف (HTML‏ واذا تطلب 
الأمر أي تغيير في المعلومات الخاصة بالمستند فإن ذلك لن يستلزم أي تعديل في HTML agus‏ كما 
كان بحدك سايقا. 


58 


2- تبادل ومشاركة البيانات: 


تستطيع لغة ال × تبادل البيانات ومشاركتهاء وقد قدمت حلولاً كثيرة لمشكلة تعارض التنسيقات 
XML oble oY Ay incompatible formats ablah iaai‏ يتم تخزينها في ملفات نصية 
بسيطة مما يجعلها تعمل من دون مشكلات مع مختلف نظم التشغيل والخوادم والتطبيقات 
والمستعرضات. 


3- إمكانية عرض البيانات بأكثر من طريقة: 


تنظر أغلبية التطبيقات إلى ملفات XML‏ كقاعدة بيانات لاحتوائها على بيانات منظمةء لذا فإنها تقوم 
بعرض تلك البيانات بأكثر من شكلء وهو ما يوفر على كثير من المبرمجين الدخول في تعقيدات قواعد 
البيانات. 

ولذلك فإن لغة ا/اا عد من التطورات الهائلة في مجال لغات الإنترنت وبخاصة في كيفية استعراض 
المعلومات إلى جانب تحديدها وفرزهاء كما يمكن لهذه اللغة أن تقود نظام التشغيل لتحديد مجموعة بعينها 
من الأرقام أو المواضيع»ء وتحديد وضعها حيث تستدعي لغة 1× البيانات وتستعرضها بشكل أفضل 
وأكثر سهولةء لذا تعد بمثابة المقياس الأمثل لانسياب البيانات وتبادلها. 


د - ال ‘JAVA‏ 


قامت شركة Sun Micro system‏ عام 1991 بتمويل بحث لإنشاء لغة برمجة لتطوير الأدوات 
الإلكترونية الذكية» ونتيجةً لهذا البحث ظهرت لغة ال 61/8 ل المبنية على لغة (++0) أطلق عليها 
مخترغها (Oak) lj) aul James Gosling‏ اكثشف فيما بعد أن هناك لغةً أخرى بهذا الاسم» فتم 
اختيار اسم g JAVA‏ أدركت الشركة فائدة ۸۷۸ل في إضافة المحتوى التفاعلي Dynamic‏ 
Content‏ والصور المتحركة l) Animation‏ صفحات الشبكة» وتم الإعلان عنها رسمياً عام 1995 
فكان إقبال القطاع التكنولوجي وقطاع الأعمال عليها كبير جداً بسبب الاهتمام الكبير بالشبكة العنكبوتية. 
وشستخدم ال 4۷۸ل في برامج للشركات أو في تحسين الصفحات على الإنترنت» أو في برامج الهواتف 
المحمولة. 
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وثعد ال Ge JAVA‏ أقوى لغات البرمجة وأكثرها تطوراً وسهولة في الاستخدام» إذ يمكن من خلالها 
التعامل بشكل أسهل مع المواقع الإلكترونية» haly‏ التعديلات اللازمة لمحتواهاء كما يمكنها إنشاء 
عدادات الدخول إلى المواقع» وإتاحة خدمة سجل الزوارء وبرامج الوسائط المتعددة المختلفة» وأغلب 
التصاميم التفاعلية في الموقع» هذا إضافة إلى إتاحتها تغييرَ الألوان والمؤثرات المختلفة» واضافة الحركة 
والصوت والكتابة» والألعاب والبرامج المساعدة» والبرامج ذات الواجهة عن طريق الرسوم والصور. 
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تستطيع العديد من لغات النصوص ومنها ال 561104 1/8ىل أن تحول: 


o‏ موقع الويب إلى موقع يتفاعل مع المستخدم من خلال إضافة أزرار ونماذج تأخذ بيانات من 
المستخدم وتحولها إلى نماذج أخرى أو ترسلها بالبريد الإلكتروني» أو تجري عليها عمليات 


ه كما يمكن أن تحول الصفحة إلى ما يسمى بصفحات الويب HTML‏ الديناميكية أو التفاعلية. 


لكن هذه اللغة تتميز عن لغات البرمجة الأخرى في كونها سهلة التحكم» وتعمل من خلال جميع أنظمة 
.Linux , «Windows (Sie adil)‏ 


:(a JAVA Script 4) Sei LS 
تغيير ألوان خلفيات الصفحة الإلكترونية وألوان الصفحة عموماً.‎ o 
كما يمكنها إلى جانب ذلك تطوير القوائم المنسدلة» واضافة خطوط متحركة ذات أشكال متعددة.‎ ٠ 
إلى جانب توفير الحماية للصفحات المصممة.‎ e 


ASP: Active Server Pages - , 


تعد هذه اللغة من آخر التطورات الحاصلة في 


ASP active cil, Aad ps Glade ات يرم‎ 
___ Server Pages وتتميز بإمكانياتها في‎ «Microsoft أطلقتها شركة‎ 





تسهيل التحكم في المواقع من حيث: KD‏ 


٠‏ التصميم والإدارة. 
« مواءمثها لكل أنواع المتصفحات المستخدمة عند المستخدمين. 
o‏ اعتمادُها أسلوب لغة ال 2115 نفسه من حيث شفرات اللغة. 


كما يمكن باستخدام هذه اللغة تتبع المستخدمين من دون العودة إلى ملفات ال „Cookies‏ 
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CSS: Cascading Style Sheets — ,‏ 
توضح هذه اللغة كيفية عرض العناصر المكونة لصفحة الويب كشكل الحروف وإخراج الصفحة» ومكان 
الصور وحركة الفأرة على الصفحة» وقد صُممت كوسيلة لتعريف إجراءات التصميم دون اللجوء إلى 
الاستخدام الخاطئ لأوامر ال HTML‏ أو الحلول التي يمكن أن يطبقها متصفح واحد فقط» فيمكن تطبيق 

ال C558‏ في الكثير من المتصفحات المرئية» ومن مميزات هذه اللغة: 

1- السرعة: يزيد استخدام هذه اللغة في التصميم في زيادة سرعة اكتساب خبرة المستخدم في 
الموقع» وعلى الرغم من تحميل الصفحة الأولى ببطء لأنه يتم تحميل كل من المضمون وألواح 
الأنماط تُحمّل الصفحات التالية بسرعة إذ إن هذه اللغة المستخدمة في التصميم تخبأ في ذاكرة 
المتصفح. 

2- المرونة: تضع ألواح الأنماط في لغة ال 055 أساليب العرض لكل الصفحات في ملف 
منفصل» وعندما يطلب صاحب الموقع إجراء أي تعديلات على الموقع كنوع الخط أو cAigl‏ 
يستطيع المصمم القيام بذلك بسهولة من خلال ملف واحد بدلاً من أن يقوم بهذه العملية داخل 
كل ملفات صفحات الموقع. 

3-يسر الوصول: تظهر الصفحات المستخدمة للغة ال 55© متشابهة باستخدام برامج التصفح 
المختلفة سواء المتصفحات المرئية أم غير المرئية ك Lynx‏ أو الإصدارات القديمة من 


الت فسات المرثية: 


ثالثاً: برامج تصميم الوسائط المتعددة المستخدمة في التصميم: 
:Coral Draw gly -Í‏ 

وهو من البرامج الشائعة في الرسم والتصميم ولاسيما في 

رسم المنحنيات التي تتميز بالتماسك والدقة مهما كان 


CorelDRAW 


أعمال فنية» ومواكبته السريعة للتطورات المستمرة على صعيد أنظمة التشغيل ‘Operating System‏ 
Software abail,‏ وقد تم إطلاق أول إصدار منه عام 1985. 
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وقد قدم الإصدار المعرب من هذا البرنامج إمكانية التعامل مع الخطوط العربية» والرسوم ذات الألوان 
الكاملة» والتصاميم المعقدة ورسوم الويب والصور المتحركة كافة» فالتطبيقات المعدة في برنامج Coral‏ 
te acl Draw‏ إنشاء: 

٠‏ الرسوم ذات الألوان المتكاملة. 

0 التصميمات والأعمال الفنية. 

o‏ الشعارات. 

© الرسوم المخصصة للاستخدام على صفحات الإنترنت. 

« العناوين المميزة التي تُستخدم في أسماء الكتب والمجلات أو أي منتجات طباعيه أخرى. 

« الصور الخيالية. 

٠ه‏ أطر الصور المتحركة. 


٠‏ الرسوم ذات الجودة العالية المأخوذة من أصول ذات جودة متدنية. 


ب- برنامج الرسم الثلاثي الأبعاد :3DS Max Studio‏ 
يُعتمد على هذا البرنامج الذي أطلقته 
شركة ۸٣00٤۸‏ في رسم وتصمیم الإشکال 
التلاثية الأبعاد» وإضافة الإثارة والإضاءة والحركة 


مدعّماً بمؤثرات ثلاثية الأبعاد» ويساعد هذا البرنامج 





الشامل في صنع الأفكار الخيالية ذات المواصفات العالية الدقة والتنفيذ من حيث الإجراء الحركي» وهذا 
الأداء هو الذي يميز البرنامج عن غيره في تكوين الصور المجسمة ومنظورها من جميع الجهات» 
ومرونة حركة الإشكال المرسومة في زوايا الاتجاهات غير المحددة وغير المنتهية في معالجتها للمواقع 
والحيز المكاني والشكلي» وهذا الأمر التنفيذي أعطى البرنامج خصوصية متميزة في تصميم وعمل 
الإشكال ثنائية الأبعاد وتحويلها إلى ثلاثية؛ كما أن الأداء الحركي يعطي مجالاً لمنظر بصري في أي 
حالة صوّرية قد يراها المصمم متكاملة في تنفيذها وتطابقها مع فكرة التصميم والإخراج ثنائي الأبعاد. 
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استخدامات برنامج 3DS Max Studio‏ 
ويُستخدم هذا البرنامج في: 
1- عرض المشاريع المعمارية من الداخل والخارج: حيث يقوم المستخدم ببناء المشروع داخل برنامج 
ال “1/13 ليظهر كما سيبدو بعد الانتهاء من بنائه في الواقع. 
2- عرض المشاريع الصناعية والآلات: كشرح عملية صناعة سلعة معينة أو توضيح مبدأ عمل 
جهاز أو آلة معينة والدخول في تفاصيلها ومكوناتها الدقيقة. 
3- عرض وشرح الظواهر الطبيعية: يمكن من خلال هذا البرنامج رسم مناظر طبيعية كاملة تحاكي 
الواقع بما تحتويه من رياح وجاذبية وأشعة شمس وأمطار وثلوج وغيرها. 
4- في الطب: يمكن من خلال هذا البرنامج رسم جسم الإنسان بجميع أعضائه ومكوناته» مما يتيح 
فرصة التعمق في شرح أعضاء الجسم وبيان طرائق وخطوات أي عمليه جراحية. 
5-الإعلان: يُستخدم برنامج ال «1/13 في تصميم الإعلانات التجارية بشكل كبير بحيث يقوم 
المستخدم من خلاله بعرض السلعة وشرح فوائدها ومكوناتهاء وكذلك يمكن إضافة المؤثرات 
المعبرة على الإعلان المصورء مما يعطيه جاذبية ولمسة فنية تجذب الانتباه إلى هذا الإعلان. 
6- الإنتاج السينمائي: يدخل برنامج ال Max‏ وبشكل كبير في الخدع السينمائية» وصنع أفلام 
سينمائية كاملة من دون الحاجة إلى أي ممثل أو آلة تصوير. 


7- صناعة الألعاب: لبرنامج ال Max‏ دور كبير في صناعة الألعاب الثلاثية الأبعاد. 


ميزات :3DS Max Studio galiz cå dall‏ 
ومن أهم ما يميز العمل في Studio gly‏ 1/13 3005 أنه: 
1- له خصوصيات بمعالجة وقواعد لغة الضوء وكيفية التحكم وتنظيم الإضاءة في المشهد. 
2- استخدام تأثيرات خاصة للإضاءة. 
3- تطبيقه للحركة الآلية المتتالية 16172316165>! “Forward‏ والأنظمة الديناميكية المطبقة على 
الشخوص والأشكال والنماذج التي تتصف بهيكلية العمود الفقري البشري. 
4- ويتميز البرنامج بفن الإنتاج النهائي وذلك باستخدامه النظام الفيديوي 2051 2.1/10 لتركيب 


المشاهد التي يتألف منها الفيلم النهائي للمشاهد الفيديوية. 
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Flash برنامج فلاش‎ -e 


Future Splash Animator eý gliz g Flash J gly Ía‏ والذي 


nh 





ai «1995 ale Future Wave Software أطلقته شركة صغيرة تدعى‎ 


.Macromedia Flash aub yha 44) 54, Macromedia 4s 4 44 i) 


ويُعد هذا البرنامج بإصداراته الكثيرة - التي ظهرت فيما بعد - أقوى البرامج في تصميم ملفات ال 
٣ا۴‏ ويمتل قيمة مضافة لتصميم الويب» إذ هو عبارة عن مجموعة برامج تساعد على إدخال الصور 
والرسوم المتحركة والصوت والحركة مع الحفاظ على الوضوح ودقة التفاصيل» ويتميز البرنامج بصغر 
حجم ملفاته التي لا تستغرق وقتاً طويلاً في التحميل» وتم هذا الأمر بعد أن قدمت الشركة المنتجة 
للبرنامج معالجة القضايا المتعلقة بيسر الاستخدام واصدارها من برنامج ×4 ۸ءها۴. 
وهناك نوعان من الحركة في برنامج ۴|15۸ وهما: 
1- حركة إطار بإطار ©1300 لاا 1173/06 4601731101: ويتم في هذا النوع من الحركة وضع 
الأشكال والصور المختلفة في كل إطار بطريقة يدوية» فإذا صُمم مشهد فيه حركة فإنه يحتاج 
إلى عشرة إطارات. 
2- الحركة البينية 6.017341017/ 111/665760: ويتم في هذا النوع من الحركة وضع الأشكال والصور 
في كل إطار بصورة تلقائية» فلا حاجة إلا إلى تصميم المشهد الأول والأخير لتصميم الحركة؛ 
ويقوم البرنامج تلقائياً بإدراج الإطارات الموجودة بين الأول والأخير لتكوين عشر صور 


(إطارات)» ومن هنا جاءت تسمية الحركة البينية. 


“Front Page Guz -2 


Microsoft’ أهم وأشهر البرامج‎ Ga- Pront Page gl a 
| ار‎ 


استخداماً في إنشاء صفحات الويب وذلك للمزايا التي FrontPage‏ 


تمتع بها من حيث إنه جزء من نظام Microsoft‏ 
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أجزاء برنامج :Front Page‏ 
يتألف البرنامج من أجزاء عدة: 
.Personal Web Server -1‏ 
2- المستکشف „Explorer‏ 
3- المحرر „Editor‏ 
خصائص برنامج :Front Page‏ 
يحتوي البرنامج على خصائص متعددة لفحص سلامة الصفحات التي يقوم المصمم بإنشائها وسلامة 
الارتباطات gi‏ تلك الصفحات مثل: 
1- إدراج الصور والنصوص وملفات الوسائط المتعددة» كالصوت والفيديو للصفحات التي تم 
إنشاؤهاء وربط ملفات الصوت بالصفحات وتشغيلها أحياناً كخلفية لبعض الصفحات» 
واستخدام تقنية الصوت والفيديو المتدفق 511823177170 للتغلب على طول فترة التحميل. 
2- ضبط وضع النص كأن يكون منخفضاً أو مرتفعاً عن السطرء أو وضعه وسط الشاشة. 
وتعديل حجم الخط ونوعه أحياناً. 
3- إضافة أي مؤثرات أخرى مثل تأثير النص الوامضء وادراج لافتات إعلانية متغيرة وعدادات» 
وأزرار متحركة» ونصوص متحركة. 
4- إضافة سمات إلى النص كأن يكون عريضاً ومائلاً أو مسطراًء أو حتى الجمع بين هذه 
السمات كي تعطي للصفحات تنسيقاً متناغماً. 


:Adobe Dreamweaver -+4‏ 
يتبع هذا البرنامج شركة ale die Adobe‏ 2005( ومن 
ميزاته إمكانية العمل في كل أنظمة التشغيل الشائعة ك 


acu LS «Mackintosh ; Windows‏ العديد من 





لغات البرمجة التي سبق ذكرها كالC58‏ « وال AVA Script‏ وال PHP‏ وغيرها من اللغات. 
ويتيح برنامج ال Dream weaver‏ العديد من الخدمات مثل: 


1- إنشاء صفحات ويب ومواقع كاملة لمن لا يعرفون استخدام الأكواد. 
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2- استعراض مواقع العملاء تجريبياً من خلال أكثر من متصفح. 
3- إنشاء Templates lä‏ لإعطاء بعض الصفحات سمات بنائية متشابهة. 


4- الاستفادة من تطبيقات ال 561101 //اثل من دون الحاجة إلى معرفة كتابة الأكواد. 


و- برامج أخرى ثستخدم في تصميم الوسائط المتعددة 
هناك برامج أخرى شستخدم في تصميم الوسائط 
المتعددة» وقبل نشر الموقع على الإنترنت تقوم على 
اختلافها من حيث الأداء والتنفيذ بإنتاج الحروف 
والصور المتحركة والثابتة» إلى جانب التأثيرات 
المختلفة» ومن هذه البرامج: 





.Windows Movie Maker Switch e 

.Paint e 

.Director e 

-Word quali ©‏ 
وتبعاً لذلك فإن هذه البرامج من أكثر البرامج استخداماً في تصميم النصوص والأيقونات والصور والرسوم 
والألوان المكوّنة للصفحات الإلكترونية. 
وكما يمكن عبر هذه البرامج نسح وتجزئة الصور والرسوم أو حتى مقاطع الصوت والفيديو فضلاً عن 
إمكانية تخليص الصور من العيوب التي قد تظهر نتيجة التصوير الأولي» ونسخ الوسائط المتعددة 
بأشكال وأحجام متعددة تناسب الحجم الإلكتروني للصحف على الإنترنت» إذ بالإمكان إضافة لمسة 


جمالية من خلالها إلى المواقع والصحف الإلكترونية. 
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خاتمه: 
ساهم ظهور خدمة الويب واستخدامُ العديد من لغات البرمجة التي سبق ذكرها في ظهور الأشكال الحالية 
من المواقع الإلكترونية وصفحات الويب» وهو ما أدى إلى: 

٠‏ زيادة ظهور وانتشار هذه المواقع يوماً بعد يوم» حتى وصل عددها إلى الملايين على الإنترنت. 

ه زيادة الإمكانيات والخدمات التي تقدمها إلى مستخدميها. 

o‏ إعطائها الشكل الجذاب الذي يثير الانتباه والاهتمام ويحتفظ بالمستخدم الوقت الأطولء وهو ما 

تسعى إليه هذه المواقع وهذه الصفحات. 

ويؤدي ظهور الإصدارات المتتابعة والمحسنة من هذه اللغات إلى إدخال تعديلات وتحسينات كثيرة إلى 
تصميم هذه الصفحات حتى تصل إلى الشكل الأمثل والأفضل الذي يتناسب مع حاجات المستخدم 
وتفضيلاته واهتماماته 
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الخلاصة 
تتكون المواقع الإلكترونية وصفحات الويب من مجموعة من ملفات متعددة» منها النصوص التشعبيةء 
وملفات الصورء وملفات الوسائط المتعددة» ولإنشاء هذه الملفات وتحريرها وتنظيمها تمهيداً لجمعها في 
موقع إلكتروني يستلزم استخدام حزمة من البرامج التقنية التي يمكن تقسيمها إلى: برامج تصميم 
الصفحات» وبرامج تصميم الوسائط المتعددة» وبرامج تحرير الصورء وبرامج التصفح» وقد ظهرت 
وتطورت العديد من لغات البرمجة وبرامج تصميم مواقع الويب في بداية التسعينيات» وتعددت أغراض 
هذه اللغات والبرامج» لكنها اشتركت في تحقيق هدف أساسيء, وهو خلق تصميم يتمتع من ial‏ 
بالبساطة والجاذبية» بحيث يثير ويجذب انتباه المستخدمين واهتمامهم» ويحقق من ناحية أخرى سهولة 


الاستخدام» وإمكانية تبادل ونقل البيانات» وتنظيم عملية الكتابة والتحرير على صفحة الويب. 


ومن مجموعة البرمجيات المتخصصة بتصميم صفحات الويب» والمتخصصة بالوسائط المتعددة 
المستخدمة HTML J ial aå‏ الأشهر والأكثر استخداماً وهي اللغة التي أطلقها ©© ا 1177-86©!/0©15. 
(alha Anii‏ خدمة الويب» وهناك أيضاً لغات متعددة أخرى ظهرت فيما بعدء ولم تعد تقل شهرة ولا 
استخداماً عن cas «ASP — JAVA Script - XML — PHP - JAVA :تlغlS HTML J|‏ 
المجموعة الثانية هناك برامج Flash - Photoshop - 3DS Max Studio - Coral DrثaW J|‏ - 


«Power Point JI جnlijı‎ - Words برنامج ال‎ - Adobe Dreamweaver — Front Page 


وغيزها من البرامج التي تساعد في تحرير ومعالجة عناصر هذه الوسائط. 
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اختر الإجابة الصحيحة: 


1. تعد لغة ال 055 أكثر لغات البرمجة تميزاً في: 

. كيفية عرض العناصر المكونة لصفحة الويب. 

. سرعة اكتساب خبرة المستخدم في الموقع. 

. إظهار الصفحات المصممة باستخدام هذه اللغة بشكل متشابه باستخدام أغلب المتصفحات. 


. الإجابة الأولى فقط صحيحة. 


m o O WD > 


گل لااك هة 


الإجابة الصحيحة: 0 الإجابة الأولى فقط صحيحة 


. أطلقها ©© ا 11201-86157615 مع خدمة الويب: 
٠.‏ لغة الطل]اط , 


. HTML J| لغة‎ . 


O o > wv 


JAVA Al 4a). 


الإجابة الصحيحة: 8 لغة ال 78/11 
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:3DS Max Studio JI من استخدامات برنامج‎ 


vee.‏ القاس الا عة من افاخل اكات 
. إظهار تشريح جسم الإنسان. 

« تضم الأعلانات. 

. الإجابتان (4) و(0) صحيحتان. 


كل الاجابات السابقة صحيحة. 


الإجابة الصحيحة: ع كل الإجابات السابقة صحيحة 
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الوحدة التعليمية الرابعة 


برامج تصفح صفحات الويب وبرامج تحرير الصور 


العناصر : 


- مقدمة. 

- برامج تصفح صفحات الويب: 

- مفهوم برامج التصفح. 

- نشأة المتصفحات. 

-Internet Explorer qs © 
„Mozilla Firefox ga o 
وظائف المتصفحات.‎ - 

- برامج تحرير الصور: 

-Adobe Photoshop برنامج‎ « 
-Corel Paint Shop Pro gly e 


„Fireworks gai o 
.JPEG «PNG «GIF : أنواع ملفات الصور‎ 
أسس اختيار الصور للمواقع الإلكترونية.‎ 


5 


- خاتمة. 


/4 


الأهداف التعليمية 
بعد دراسة هذه الوحدة التعليمية يجب أن يكون الطالب قادراً على أن: 
1- يشرح برامج تصفح الويب 
2- يحدد الترتيب الزمني لنشأة المتصفحات 
3- يعدد وظائف المتصفحات 
4- يشرح برامج تحرير الصور 
5- يحدد تنسيقات الصور الأكثر استخداماً عبر شبكة الإنترنت 


6- يشرح أسس اختيار الصور للمواقع الإلكترونية 


Mozilla œu» -— Internet Explorer gly- الكلمات المفتاحية: التصميم - متصفح الويب‎ 
Fireworks — Corel Paint Shop Pro — Adobe Photoshop — تحرير الصور‎ - Firefox 
JPEG — PNG — GIF — gual) lal - 


أولاً: مقدمة: 


i‏ تخدم برامج تصفح المواقع الإلكترونية» وهي 
البرامج الخاصة بعرض النصوص والصور 
والصوت والفيديوء والملفات المختلفة المخزنة على 


مزودات الويب» وقد صممت هذه البرامج 





© © 


من قبل العديد من شركات البرمجة لتكون بسيطة الاستخدام» وتساعد المستخدمين على عرض 


امات ودا ا 
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وقد أضيفت إلى جانب متصفحات المواقع محركات البحث Engines‏ 5689/60 التي تساعد في 
الحصول على المعلومات من خلال كتابة عنوان الموقع الإلكتروني ا*الاء أو البحث عن الكلمات» 
واضافة المواقع المفضلة دون الحاجة إلى كتابة العنوان مرة أخرى» وهو ما سيتم التعرض له في هذه 
الوحدة» إضافة إلى استعراض برامج تحرير الصورء وأنواع ملفات الصور الأكثر استخداماً في تصميم 
مواقع الويب» وميزات هذه الأنواع وخصائصها وقواعد استخدامها. 


Lili‏ : برامج تصفح الويب: 


يستخدم المتصفح أو المستخدم للمواقع الإلكترونية 
العديد من برامج تصفح الإنترنت» والتي تتفاوت في JE‏ 
إمكانيتها من متصفح إلى آخرء ويعود هذا 





الاختلاف إلى طبيعة الأكواد التي تستخدمها (الرموز التي يتعامل معها كل متصفح) هل هي متوافقة مع 
المواصفات القياسية التي تضعها الشركات العالمية أم لاء لذلك تسعى هذه الشركات إلى إظهار إصدارات 


جديدة من المتصفحات تستطيع التعامل مع هذه الرموز بسبب ظهور قياسات جديدة للترميز باستمرار. 


« برامج استعراض الصفحات الإلكترونية الأكثر استخداماً عند المتصفحين. 

٠‏ وما المتصفحات التي تدعم الأكواد والرموز القياسية. 

٠‏ وما نسبة متصفحي الموقع الإلكتروني الذين يستخدمون كل متصفح لتلافي السلبيات التي يمكن 
أن تؤثر في عرض الموقع الإلكتروني بشكل رديءء وأيضاً لكي يتمكن من اتخاذ القرار السليم 
بشأن عملية تصميم الموقع» والاستفادة من المزايا التي يمكن اعتمادها في التصميم» وكيفية 
تنفيذها لتعمل بشكل صحيح مع كل المتصفحات على الرغم من أن المتصفحات الأشهر في 
الوقت الحالي كمتصفح Internet Explorer JI‏ وال Cisu4ai Mozilla Firefox‏ تدعم بعضها 
باختلاف أنظمة التشغيل المستخدمة على أغلب أجهزة المستخدمين» كنظام ال Windows‏ 


ونظام ال Mackintosh‏ وغیرھا من الأنظمة. 
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ثالثاً: نشأة المتصفحات 


أطلق Tim—Berners Lee‏ أولَ متصفح للإنترنت عام 1991 وهو 


World Wide Web‏ وقد صمم هذا المتصفح ليكون محرراً 
لصفحات مواقع إنترنت أيضاًء ثم بدأت المتصفحات بالظهور 
والانتشار. 


وقد بدئ في تطوير متصفح 1/0531 عام 21992 وظهر عام 
3 كأول متصفح للنصوص فقطهء وكان يدعم أنظمة ال ×اہ لاء 
ثم طور هذا البرنامج حتى أصبح يقبل تصفح الصور ويتعامل مع 
أنظمة التشغيل الأخرى «Mackintosh «Windows :cie‏ وغد 





6٥‏ طفرة حيث كان يتم تحميله خمسة آلاف مرة شهرياً. 


Netscape Navigator aiai 1994 ale Netscape 45,5 cuilbi 25‏ وقد کان له أثر کبیر 


وفي عام 1995 قامت Microsoft‏ بشراء شركة 50[01355 التي كانت تطور متصفحاً أصبح فيما بعد 
«Internet Explorer miis‏ ومع طرح هذا المتصفح بدأت المنافسة بين Microsoft (“Sy‏ 
«Netscape s‏ والتي كانت من نتائجها زيادة انتشار المتصفحاتء وزيادة عدد مستخدمي شبكة الإنترنت. 
وكان من نتائجها السلبية doc‏ استخدام المعايير القياسية للترميز» فأصبحت كل شركة تضيف ميزات 
غير قياسية يدعمها متصفح ولا يدعمها المتصفح الآخرء وكان المستخدم لا يستطيع أن يستعرض الموقع 


الإلكتروني إلا بمتصفح واحد. 
وقد استطاعت ]1/10/0501 أن تكسب هذه المنافسة لفترة لأنها كانت تملك حصة كبيرة في أنظمة 
أي jal giai‏ على حواسيبهم» واستطاعت حتى عام 1998 أن تحتكر سوق أنظمة التشغيل 


والمتصفحات» وفي أواخر عام 1998 طرحت ١16150306‏ متصفحها كمصدر مفتوح» وقامت بإنشاء 


gal Mozilla gyi‏ يهدف إلى تطوير متصفح Netscape‏ اعتماداً على فلسفة البرامج الحرة 
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والمفتوحة المصدرء لكن المشروع لم يلق دعماً كبيراً من قبل مطوري البرامج إلا في عام 2002 حيث 
طرح الإصدار الأول منه» ثم ظهرت مشاريع فرعية لهذا المتصفح أشهرها متصفح Mozilla Firefox‏ 
الذي طرح إصداره الأول عام 2004» والذي أصبح منافساً قوياً لمتصفح 01078“ az: ai «Internet‏ 
ذلك ظهر متصفح شركة 600916 عام 2008 والذي يحمّل بالمجان على موقع Google‏ وأصبح من 


„Internet Explorer J jيفlinلl أقوى‎ 


وفي عام 1996 ظهر متصفح ال 006/3 لكنه لم ينجح في الانتشار على نطاق واسعء لكن هذه الشركة 
اشتّهرت أكثر بمتصفحات الإنترنت على الهاتف المحمول. 


à LÍ‏ عام 2003 فقد أطلقت شركة ©6امم8 متصفح Safari‏ وابتداءً من عام 2009 أصبح لهذه 
الشركة ما يزيد قليلاً عن %4 من سوق المتصفحات بأكملهاء وقد استخدم في الهواتف النقالة بما في 
Nokia S60 5 «Google Android , IPhone Jail aUa di‏ والمتصفح الأخير الذي طرح في 
السوق لمتصفح 6009016 متصفح laa Ji o, Chrome‏ له عام 2008. 


© Syria Now x 
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باستخدام 
ea ۰‏ 
الصفحة الرنيسية ER‏ مصدر عسكري سوري: الجيش يسيطر على قرية مرج السلطان والمطار في غوطة آخر تحديث 14/12/2015 - 11:45 ۾ 
A‏ أخبار سورية الآن seat‏ دمشق الشرقية ...المزيد 
T Se‏ 
۴ أخبار العالم الآن ١‏ أخبار الرياضة // r‏ 
Ñ a ‘ETT Mozilla‏ 
GES‏ منتخب سورية الأولمبي يبدأ تحضيراته a‏ 
eiae globi at 1‏ 
Sas‏ ا 15:45 14/12/2015 
الاقتصاد والاعمال دخل لاعبى متتخبتا الأولمبى لكرة القدم أمس ٠‏ ليلة الدخلة قي الرياض وسياق الهجن ..والتيح 
حديث الناس في معسكر تدريبى يستمر حتى الحادي العظيم.. ,بقلم تارام سرجون 
أخبار الرياضة ٠ awii,‏ الطريق إلى الباب العالى.. أوهام 
الثقافة والشباب أردوغانية...خيري متصور/ الاهرام 
ma‏ . 4 : 
فنون و دراما الدوري dat Late Zag ccc‏ * أوطان وأتمان...يقلم يتت الارض 
الصحة و المجتمع مدريد أمام فياربال (فيديو) © سورية يدون ...الجبير؟! يقلم ماجدي 
منوعات 5 14/12/2015 اليسيود 
gal = Jj‏ قريق قيليال الخسارة التالتة يضيقه 
درجات الحرارة ريال مدريد هذا الموسم وتغلب عليه 0-1 syrianow.sy/index.php?d=12&id=10555‏ 
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رابعاً: وظائف المتصفحات 





ومن أهم الوظائف التي تقوم بها المتصفحات: 


1- إمكانية عرض الصفحات على شاشة المستخدم تماماً كما تم تصميمها. 
2- القدرة على التجول بسهولة» فكل متصفح لديه واجهة للمستخدم يجب أن تتكامل مع إمكانيات 
الإنترنت» فكيفية تطبيق هذه الملامح جيداً وعملها معاً في متصفح ما تحدد يسر المتصفح في 
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التجول» وجانب آخر مرتبط بيسر التجول هو القدرة على اختيار وتحديد وتحرير الروابط المفضلة 
وفقاً لتفضيلات المستخدم. 

3- إلغاء عرض الرسوم مما يسرع من عملية التحميل. 

4- توفير خدمة الذاكرة المخبأة /ا1/160701! Cache‏ والتي من خلالها يمكن تخزين المعلومات في ذاكرة 
الحاسب بعد الانتقال إلى صفحة أخرىء وعند العودة إلى تلك الصفحة ثانية يتم استدعاء الصفحة من 
ذاكرة الحاسب بدلاً من استدعائها من المصدر الرئيسي على الويب لأن تحميلها أسرع من تحميلها 
من خادم الويب. 

5- سهولة استخدام المتصفح: إذ يحتوي المتصفح على شريط أدوات به أيقونات وأزرار لأهم العمليات 
المتكررة التي يحتاج إليها المستخدم حسب تفضيلاته وعاداته الشخصية. 

6- إتاحة المتصفح للمستخدم تغييرَ حجم حروف الكلمات ونوعهاء ولون الخلفية» كما يستطيع تغيير 
الصفحة الرئيسية التي يتم من خلالها التجول في الويب بمجرد فتح نافذة المتصفح. 

7- يمكن للمتصفح التعامل مع بروتوكولات متعددة أي يمكنه الوصول إلى أكثر من خادم لتوفير 
المعلومات باستخدام مجموعة قواعد للاتصال (بروتوكولات) متنوعة مثل 12] و1115ا. 

8- يمكن للمتصفح الوصول إلى الوسائط المتعددة والنص التشعبي بما في ذلك المواد الغرافيكية» والصور 


والأفلام والأصوات. 


وقد يجد المستخدمون في أثناء انتقالهم من متصفح إلى آخر أن بعض الصفحات لا تُعرض بالشكل 
المطلوب» ولاسيما عند الانتقال من Maas «Mozilla Firefox ..1) Internet Explorer‏ يعود إلى أن 
مصممي المواقع يستخدمون أكوداً لا تتبع للمواصفات القياسية التي وضعتها منظمة 3٥‏ وقد أمكن 
التغلب على هذه المشكلات بوضع امتداد ل )١ Tab) p Mozilla Firefox‏ يمكن من خلاله تفسير 


Ja, Internet Explorer‏ مشكلات التنسيق وترجمة الصفحات. 
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كاسنا : برامج تحرير الصور 


تستخدم الصور على المواقع الإلكترونية بأشكال 

ختلفة» فهناك الصور المستخدمة في تصميم 
ن a Fw ” a Sap tee)‏ 2 
الإخبارية T Wie,‏ الأشكال التي PhotoSho 2 ab‏ 


مساحة واسعة من الصفحات»؛ ويرى ١161567‏ 9610ل أن الصور في الموقع الإلكتروني قد تكون 
عائقاً نحو إدراك المضمون وبخاصة إذا اتسمت بالغموض وعدم الوضوح» لذلك تحتاج الصور المعدة 
للعرض على المواقع الإلكترونية إلى العديد من عمليات المعالجة والتحرير التي تساعد المصمم في 
الاستفادة القصوى من ميزات الصور وجعلها أداةً لفهم وادراك المضمون بشكل أفضلء وأداثه في ذلك 
العديد من برامج تحرير الصور ومعالجتهاء والتي يقصد بها البرامج القادرة على حفظ الصور واعادة 
عرضهاء وتغييرها وتبديلهاء واعادة تلوينهاء واضافة بعض المؤثرات الخاصة إليهاء وعندما يستخدم 
المصمم الصورّ على صفحات الويب فإنه يحتفظ بها كملفات منفصلةء ويُضاف إلى الصفحة مؤشر 
501016 يحدد للمتصفح مكان ملف الصورء وفي كل مرة يدخل المستخدم إلى الصفحة يقوم برنامج 
التصفح بتتبع هذا المؤشر لإدراك الصورة المحددة وتضمينها الصفحة ليراها المستخدم» وعندما لا يرى 
المستخدم هذه الصورة فلأن برنامج التصفح لم يستطع الوصول إلى مكان ملف الصور الصحيح» لذا 
يجب التأكد من نشر كل ملفات الصور عند نشر موقع الويب. 





أشهر أنواع الصور: 


- الصور النقطية: عبارة عن مجموعة من النقاط (وحدات البت) الملونةء 


ولا يمكن تغيير حجم هذا النوع من الصور دون التأثير على جودتها. 
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الصور الاتجاهية: والمعروفة أيضاً بالرسوم الاتجاهية» وهي الصور Tias‏ 
المصممة من قبل المستخدم» وتتألف من خطوط ومنحنيات تصمم وفق 
Apaly GY sles‏ وتقذها: اتخاس وبالقالن تيمكن oud‏ حدم هذه الصو 
وشكلها دون تأثر جودتهاء ويمكن استخدام العديد من البرامج لإنشاء هذا 
النوع من الصور كبرنامج ال Dream Weaver JI si Word‏ 





أو ال Gye gill Ibe Cad, «Front Page‏ الصور أنها تظهر بامتداد VML: Vector Markup‏ 
56 ا وبرنامج التصفح الوحيد الذي يدعم هذه النوعية من الصور هو متصفح Internet‏ 
«Explorer 5‏ لذلك يراعي المصمم عند استخدامها توافر هذا المتصفح» أو تحويل الصور إلى نوعية 

أخرى ك 6/5 التي يدعم ظهورّها أغلب برامج التصفح المستخدمة. 


أشهر برامج تحرير الصور على الإنترنت: 


1 - برنامج معالجة الصور :Photoshop‏ 
ويُقصد ببرامج معالجة الصور تلك البرامج التي تتعامل مع الصور المخزنة رقمياً 
في ذاكرة الحاسب حيث لم تعد إمكانات البرامج قاصرة على حفظ وإعادة عرضهاء 
وانما امتدت إلى القدرة على التغيير والتبديل في الصورة سواء في ACELEI a il i‏ 
خلفيتها أم إعادة تلوينها واضافة بعض المؤثرات الخاصة لهاء كالحذف والإضافة 
أو التغيير في ملامحها. 
eil ga Photoshop s‏ وأهم برامج معالجة الصور الإلكترونية والصور الرقمية للكاميرات الجديدة 
التي تحتوي بطاقة ذاكرة Memory Card‏ تُحمّل عليها الصور بالتقاط معين أو باستخدام فيلم صوّري 
محدد أقصر مما هو عليه في كاميرات الفيديوء وتأتي فعالية هذا البرنامج في قدرته العالية على التعامل 
مع جميع احتياجات المصممين المتعددة والتي تختلف من مصمم إلى آخر. 
ويُستخدم هذا البرنامج بشكل رئيسي لإدخال المؤثرات على الصورة الفوتوغرافية أو الصورة الرقميةء 
والتعامل مع الرسوم» إذ يمكن استخدامه لإنشاء رسوم فنية أصلية» حيث يتم تعديل الصور وتحسيثها 
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وانشاء تصميمات ولوحات فنية (إلكترونية)» وكذلك تصميم الواجهات سواء أكان لمواقع الإنترنت أم 


البرامج أم الألعاب. 


:Corel Paint Shop Pro gal, -2‏ 
يُعد هذا البرنامج المنافس الأقوى ل م517010510, لأنه يمتلك مجموعة 
من الأدوات الاحترافية التي تتيح للمستخدم التحكم بالصور وعمل 
التعديلات المطلوبة عليها كالدمج والقص» والكتابة على الصور 
والتحرير والتلوين» وعملٍ الكثير من الإضافات عليها من خلال أدوات 
قوية تمكّن المصمم من عمل العديد من الوظائف على الصور مثل: ELEC‏ 


256x256 


~HelmerN 





- القدرة على التحكم في الصور وإدارتها بطريقة سهلة ومبسطة تسمح بالوصول لأي صورة سريعاً 
مع القدرة على تقييمها واضافة المعلومات والوصف عليها. 

- تغيير مكان الصورة وموضعهاء والتحكم في دقة عرضها وجعلها كبيرة أو صغيرة. 

- العمل على إجراء بحث سريع لإيجاد الصور المطلوبة. 

- تعديل الكثير من عيوب الصور مثل العيون الحمراء والشوائب والأتربة» وتعديل الألوان والإضاءة 
وغيرها. 

- إمكانية تدعيم البرنامج بمجموعة متكاملة من المؤثرات المتنوعة. 

- إمكانية استعراض الصور بعد عمل الإضافات والتعديلات عليهاء وحفظها بأي صيغة ممكنة. 


وتكمن مشكلة هذا البرنامج أن الجهاز سيتأثر وتقل سرعته قليلاً بسبب استهلاك البرنامج لموارد الجهاز. 
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:Fireworks gai, —3 


وقد صُمم هذا البرنامج من قبل شركة zls bj gz &y Macromedia‏ 
الويب ومختلف الأشكال الغرافيكية» وصّمم خصيصاً لمصممي الويب 
ولاسيما المبتدئون لأنه أسهل وأيسر في التعامل. 


سادساً: تنسيقات الصور الأكثر استخداماً عبر شبكة الإنترنت: 





لا تستطيع برامج التصفح عرض الصور إلا إذا كانت ملفاتها بإحدى التنسيقات المعروفة» وقد أكد 
المصممون أن تنسيقات الصور الأكثر استخداماً عبر شبكة الإنترنت هي الصور ذات التنسيقات: GIF‏ 
.PNG , JPEG ,‏ 


GIF: Graphic Interchange Format i أولاً: صور‎ 


ظهر هذا التنسيق أواخر الثمانينيات من قبل )48 CompuServe‏ وذلك | GIF‏ 
بصيغة 6187 كإصدارٍ «sf‏ ثم ظهر الإصدار الثاني منه 61989 الذي دعم .| _ 
الصور المتحركةء ثم ظهر إصدار61© ليمزج بين الإصدارين السابقين» وقد 
أصبح هذا الإصدار الأكثر استخداماً وشيوعاً على الإنترنت. | 
يتيح هذا التنسيق إمكانية تخزين الصور بخلفيات شفافة» كما يصلح مع الصور 
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القليلة الألوان» كالإعلانات عن الوظائف مثلاًء فهي تصلح للصور ذات التباينات الكبيرة التي تشتمل 


على لون واحد مثل الشعارات» ورسوم الكارتون والأيقونات» والأزرار والخطوط والرسوم المتحركة. 


ويحتوي هذا التنسيق على ما يصل إلى 256 لوناًء وهي الألوان الموجودة في لوحة جهاز الحاسب» فإذا 
لم يوجد اللون الموجود في الصور في نظام تشغيل هذا الجهازء فسوف يقوم بعرض اللون بتقنية الانتشار 
اللوني من خلال دمج الألوان مع بعضها للاقتراب من اللون المطلوب في الصورة» ويتم الحد من هذه 
المشكلة عن طريق إنشاء الصورة باستخدام مجموعة الألوان الأساسيةء كما يمتاز هذا التنسيق بإمكانيات 
أخرى يُذكر منها: 
- إمكانية الضغط والتصغير من دون فقد أي تفاصيل من الصورة. 
- إمكانية جعل الصورة شفافة» وذلك من خلال اعتماد أحد الألوان ليكون هو اللون الشفاف عند 
عرض الصورة» ويقوم برنامج التصفح باستبدال هذا اللون بلون الخلفية» وسيسمح هذا بالظهور 
من خلال الصورة في تلك المناطق» ويعيب هذه الطريقة أنه قد يجعل الصورة ذات حواف 
متعرجة» ويتم معالجتها بأحد برامج معالجة الصور مثل برنامج .Adobe Photoshop J|‏ 
- استخدام العرض المتداخل: يقوم المتصفح باستقبال الصورة ذات التنسيق baly faia Gif‏ على 
عكس ما يحصل مع أنواع الصور الأخرى؛ صحيح أن كثافتها تكون أقل وبالتالي وضوحها أقل» 
لكن برنامج التصفح عندما يستكمل تنزيلها سيزيد من الوضوح حتى تبلغ الحد الأقصىء وهذا يتيح 
للمستخدم الفرصة ليقرر إذا كان سيكمل تصفح هذه الصورة أم لا. 
- جعل الصورة متحركة: يمكن إضفاء نوع من الحركة على هذا النوع من تنسيق الصور عن طريق 


تنظيم سلسلة من اللقطات الثابتة» وعرضها بسرعة لتعطي الإحساس بأنها صور متحركة. 
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JPEG: Joint Photographic Experts Group 4) pya :titi 
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يُعد هذا التنسيق أحد خيارات عرض الصور ذات التدرج اللوني المستمر على صفحات الويب» ويستخدم 
أسلوبت ضغط البيانات ما يؤدي أحياناً إلى فقد بعض البيانات من ملفات الصورة الأصلية والتأثير على 
جودة الصورة» لكن عملية التصغير ضرورية على صفحة الويب لتقليل زمن التحميل› ويتيح هذا التنسيق 
بعض الميزات والإمكانيات منها: 


s 


- يلائم هذا التنسيق الصور الفوتوغرافية أكثر من الشعارات أو النصوص المزخرفة والتي تحوي 
ملايين الألوان» وتحتاج إلى الدقة والجودة العالية في درجة الألوان والوضوح. 

- يستطيع هذا التنسيق التعامل مع عدد من الألوان أكثرٌ مما يتعامل معه تنسيق ال Gif‏ الذي 
يتعامل مع 256 لوناً» أما هذا التنسيق فيستطيع التعامل مع 16.7 مليون لون (ستة عشر مليوناً 
وسبعمئة ألف لون) بعمق لوني درجته 24 بتء لذلك فهو يستطيع التعامل مع الصور ذات 
التدرجات اللونية المعقدة. 


أما عيوب هذا التنسيق» فتتلخص في كون الصور التي تحمل هذا الامتداد لا يمكن وضعُها على صفحة 
الويب إلا في شكل مربع حتى لا تتأثر كفاءة الصورة وجودثهاء كما لا يدعم هذا التنسيق الصور 
Jax sl AS pail‏ الصور شفافة» وعند القيام بعملية ضغط ملفات هذه الصور فسيحصل ally å ii‏ 


هذه الملفات» ولكن قد لا يشعر المستخدم بها كثيراً. 
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PNG: Portable Network Graphic — ثالثً: صور‎ 


يُعد هذا التنسيق من أفضل الطرائق لتقديم الصور عبر صفحات الويب» وقد 
استطاع أن يتلافى عيوب التنسيقين السابقين» لكن مشكلته تكمن في كونه 
غير مدعوم من جميع برامج التصفح. 

g Uili JPEG‏ أن: 





o‏ يدعم الصور ذات الألوان القليلة» والصور ذات الألوان الكثيرة. 

o‏ التغلبت على مشكلات ضغط ملفات الصورء واعادة فك الضغط من دون أن تتأثر جودة الصورة 
وعلى الرغم من اتفاق المصممين على أن هذه التنسيقات الثلاثة هي الأشهر والأكثر استخداماً» وهي 
التي تدعمها أكثر برامج التصفحء لكن لا بد من التذكير أن هناك تنسيقات أخرى للصور مثل صور ال 
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SWF‏ وصور الفلاشء لكنها مازالت تعاني من عدم دعم كل المتصفحات لهاء وتعاني من مشكلات في 
عملية الضغط وفكه إذ تتأثر بياناتها بشكل كبير. 


سابعاً: أسس اختيار الصور للمواقع الإلكترونية: 


يعتمد المصمم في اختياره لعرض الصور على المواقع وصفحات الويب على مجموعة من القواعد 
والأسس» يُذكر منها: 


1- يجب أن تكون الصور الصغيرة كالأيقونات والأزرار» وعينات الصورء والصور التي تستخدم 
Lalas‏ من نوع الصور المترابطة يتم فتحها مرة واحدة وليس تدريجياء كما يجب استخدام 
الصور ذات التنسيق Gif‏ في تصميم الشعارات والأيقونات. 

2- الالتزام بالنسبة للصور بجدول ألوان الويب والذي يحتوي على 216 لوناًء ويستطيع برنامج 
التصفح عرضها على الرغم من وجود بعض برامج معالجة الصور كال sll Photoshop‏ 
يستطيع التعرف على الألوان الموجودة في الصور والتي لا تظهر على الويب بألوانها الأصليةء 
كما يمكن استخدام صور ال 615 التي تحتوي على 216 لوناً ويعرفها متصفح الويب . 

3- استخدام الصور ذات التنسيق ۴۴6ل في الصور التي تزيد مساحتها عن 200200 بيكسل» 
واستخدام الصور ذات التنسيق ۴أ في الصور التي تقل مساحتها عن 200×200 بيكسل» 
وسبب ذلك أن قدرة صور ال 614 على الضغط وتقليل المساحة من دون تأثر جودتها أكبر. 


4- الاختيار بين نوعين من الصور الاتجاهية: صور ال 760610 التي تتكون فيها الصورة من 
تتكون من شبكة من النقط (البيكسلات)» ولا تتكون من مساحات لونية. 


5- الاحتفاظ بنسخ احتياطية من الصور التي سُعرض على صفحة الويب قبل إجراء أي تعديلات 


88 


خاتمه: 
ضمت قائمة برامج التصفح مجموعة من البرامج التي تساعد المستخدم على الانتقال من صفحة إلى 


أخرى في الموقع نفسه وفي مواقع gai‏ ومن أشهرها برنامج ال Internet Explorer‏ وبرنامج ال 


مع المواصفات القياسية وبعضها cY‏ وتقوم هذه البرامج بتحقيق العديد من الوظائف إضافة إلى إتاحة 


الانتقال بين الصفحات: وتسهيل الاستخدام» وعرض النصوص: والصور والملفات المختلفة. 


أما قائمة برامج تحرير الصور فقد ضمت مجموعة من البرامج التي تساعد في تعديل ودمج وقصء 
وتغيير وتبديل ألوان الصور بأشكالها وأنواعها المختلفة» من صور إخبارية ورسومء وأيقونات وشعارات» 
وقد تنوعت تنسيقات هذه الصور بين ال أ وال (PNG J, JPEG‏ ويعلم المصمم إمكانية استخدام كل 
نوع من أنواع هذه التنسيقات لتحقيق أغراض وأهداف مختلفة نظراً لاختلاف خصائصها وميزاتهاء وطبقاً 
للقواعد والأسس المعروفة في اختيار الصور وعرضها على الويب. 
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a 


الخلاصه 


يستلزم لرؤية صفحات المواقع الإلكترونية والتنقل بينها وبين الصفحات الأخرى خارج الموقع نفسه 
استخدامُ برامج التصفح المتخصصة بذلك» وقد ظهرت أولى هذه البرامج مع ظهور خدمة الويب وبداية 
انتشارهاء فكانت شركة à lhd Microsoft‏ هذا المجال من خلال متصفحها الشهير Internet‏ 
Explorer‏ الذي ترافق مع نظام تشغيلها الشهير «Windows‏ ثم تبعتها شركة 76150906 التي أطلقت 


Firefox kaliy‏ 110213 الذي أصبح فيما بعد من أشهر برامج التصفح وأكثرها استخداماً. 


وفي الأغلب لا تتوافق برامج التصفح المستخدمة مع بعضها في عرض العديد من المواقع» لذلك يسعى 
المصممون دائماً إلى التعرف على المتصفحات الأكثر استخداماً لدى مستخدميهم لتلافي السلبيات التي 
يمكن أن تظهر نتيجة تفاوت إمكانية العرض بين هذه المتصفحات. 


أما برامج تحرير الصورء فقد ظهرت وتطورت العديد من ¿Adobe Photoshop gss gehal‏ 
gat Sly Fireworks gins‏ هذه الصور على المتصفح يجب أن تكون بصيغة ال: ۴ا6 أو 
.JPEG | PNG‏ 
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اختر الإجابة الصحيحة: 


من تنسيقات الصور المستخدمة في العرض على الويب: 


„Gif J jga A 
.Ghf صور ال‎ .8 

JPEG صور ال‎ .6 
gesa (CAD 


8. (8) فقط صحيح. 


F‏ الإجابة الصحيحة: 0 (8) و(0) صحيحان. 


tale å Internet Explorer alin gl 


.1994 .A 
-1993 .B 
.1995 .C 
.1996 .D 


الإجابة الصحيحة: © 1995 
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صور ال 26ل أفضل في عرض الصور الصغيرة والشعارات» والأيقونات الصغيرة. 


eek 
خطأ‎ .8 


الإجابة الصحيحة: 8 خطأ 


«A‏ ده 
8. خطأ 


الإجابة الصحيحة: 8 خطأ 


الصور النقطية تتكون فيها الصورة من مساحات ملونة» ولا تتأثر إذا ما تم تكبيرها أو تكبير جزء منها. 


ead 
خطأ‎ .8 


الإجابة الصحيحة: 8 خطأ 
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الوحدة التعليمية الخامسة 


العناصر: 


- مقدمة. 

- عناصر تصميم صفحة الويب: 

-Containing Block كتلة المحتويات‎ o 
شعار الموقع 000 ا.‎ "© 

-Navigation x.y! © 

Content gjall e 

„Footer ggl lell ه‎ 

. Whitespace ء«lضيبll المساحة‎ © 


.Ground iay! o 


„Point النقطة‎ o 
-Line Lal) e 
Shape JSall o 
-Form gigaill © 
„color yal o 
خاتمة.‎ - 
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الأهداف التعليمية 
بعد دراسة هذه الوحدة التعليمية يجب أن يكون الطالب قادراً على أن: 


1- يشرح مواصفات مستخدمي مواقع الويب 

2- يعدد عناصر التصميم 

3- يحدد نماذج إدراك الألوان 

4- يشرح نظريات الألوان التي تفسر وجودها 

5- يحدد مجموعة الألوان التي صنفت على عجلة الألوان 


6- يحدد أسس وقواعد استخدام الألوان 


الكلمات المفتاحية: التصميم - عناصر التصميم - النقطة - بيكسل - البنية - الخط - الشكل - 
المساحة - الأرضية - النموذج - اللون - نموذج ۸68 - نموذج 158 - تشبعات اللون - شدة اللون 


- الوضوح - نظريات الألوان - نظرية الضوء - نظرية CMYK‏ - عجلة الألوان. 


أولاً: مقدمة 


تعني عملية تصميم صفحة الويب تطبيقَ الأسس والطرائق المتبعة في التصميم عموماً للوصول إلى تلبية 
الاحتياجات الفردية» أو الجماعية» للمستخدمين» بمعنى هي طريقة لعرض محتوى الصفحة من نصوص 


وصور ورسوم وألوان بأسلوب بسيط وجذاب لإثارة الانتباه وجذب الاهتمام. 


وترتبط عملية التصميم بالعديد من العوامل المتعلقة بالمستخدمين أنفسهم» وما يرتبط بها من آلية الإدراك 
البصري للأشياء عندهم» والقدرات العقلية والنفسية التي تميزهم» وكذلك الفروق الديموغرافية والشخصيةء 
كالنوع والعمر» والمستوى التقافي والاجتماعي وغيرهاء لذلك على المصمم أن يكون ملمَاً بهذه العوامل 
والفروقات» وأن يعمل على خلق تصميم يتناسب وكل الميزات والخصائص التي يتمتع بها المستخدمون. 
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وقد أظهرت الدراسات أن المستخدمين يفضلون المواقع البسيطة الواضحة السهلة الإدراك وغيرَ 
المتشابكة» والتي تقدم لهم المعلومات التي يبحثون عنها بأسلوب منطقي وثابت للتجول في صفحات 
الموقع» أي أنهم يفضلون المواقع التي تستطيع أن توظف عناصر التصميم بشكل يتناسب مع حاجاتهم 
وتفضيلاتهم» ومن هذه العناصر: التكوين العام» والنقط والخطوطء والأرضيات والمساحات البيضاء 
والنصوص والصورء والشعارات والأيقونات» والألوان وغيرها من العناصر التي سيتم التعرض لها 
بالتفصيل في هذه الوحدة. 





يراعي المصممون في أثناء تصميمهم للمواقع أنها 
لن تقوم بتقديم المعلومات لهم بسهولة فقطء لكنها 
إضافة إلى ذلك تتميز بالجاذبية والجمال» والا 
agili‏ سيعرضون عن استخدامهاء لذا فإن عناصر 
تصميم الموقع يجب أن توظف بشكل متكامل 


بحيث تتحول إلى محفز قوي للاستخدام» Lapras‏ 





- هؤلاء المصممون أن المستخدمين: 
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- ينظرون إلى الوقت اللازم لعملية تصفح صفحة الويب للحصول على المعلومات على أنها واحدة 
من العوامل الأساسية في نجاح التصميم» لذلك على التصميم ألا يكون عائقاً بين المستخدم 
وحصوله على المعلومات. 

- يرغبون بأن تكون أدوات التجول والإبحار واضحة تساعدهم على التعرف على الصفحات التي 
يريدون الانتقال إليها في الموقع مع الأخذ بالاعتبار ألا تبرز على حساب المحتوى المعلوماتي 
للموقع. 

- يعتبرون أن كل صفحة من صفحات الموقع هي جزء منه» وبالتالي يجب ألا يختلف تصميم 
الصفحة الرئيسية عن تصميم الصفحات الداخلية» من حيث توزيع المعلومات والمظهر الجمالي 


الذي يجب أن تتمتع به. 


ويستخدم المصمم مفردات لغة الشكل المرئي وهي عناصر التصميمء والتي سميت بذلك نسبة إلى 
إمكانياتها المرنة في اتخاذ أي شكل يمثل تكوينأء وقابليتها للاندماج والتآلف والتوحد فيما بينها لتكوين 
شكل كلي للعمل المُصمّم؛ وعناصر التصميم هي المكونات الأساسية المستخدمة كجزء من أي تشكيل» 
وهي عبارة عن مواضيع مرتبطة بأجزاء» وفي معظم الحالات عناصر التصميم يبني كل منها الآخرء 
والعنصر المتكون يساعد في خلق العنصر الثاني وهكذا. 


ثالثاً: عناصر التصميم 


توجد مجموعة من العناصر التصميمية التي يعتمدها جميع المصممين المحترفين في مختلف 
تخصصاتهم والتي تنطبق على تصميم صفحات الويب خاصة» والتي يتمتع كل عنصر منها بدرجة من 
الأهمية في تحديد مظهر الموقع وروحهء ويمكن استعراض هذه العناصر على النحو الأتي: 


:Containing Block Glginal) 4tis - 1 


لكل صفحة ويبء ما يمكن أن يُطلّق عليه (الحاوية) أو ما يطلق عليه بعض الباحثين التكوين العام 
للصفحةء وهي المساحة المحدودة التي تحدّد في أثناء التصميم» والتي من خلالها يظهر الموقع في كامل 


الشاشة» ويجب أن تضم عناصر الصفحة ومحتوياتهاء ويجب أن يصمّم هذا التكوين بحيث يكون La)‏ 
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مرناً يتسع مع اتساع صفحة المتصفح» أو ثابتاً لا يتغير كما في الصحيفة الورقيةء فكتلة المحتويات أو 
تكوينها العام هو قطع الصحيفة بالكامل أي كامل التصميم إضافة إلى الفراغات البيضاء المحيطة 
بالتصميم؛ ويمثل التكوين العام هذا المجال المرئي في مساحة شاشة العرض للموقع الإلكتروني. 


2- شعار الموقع 000 ا: 


أيضاً لكل صفحة ويب هوية خاصة يحددها شعار هذا الموقع؛ وأحياناً لونه» كما هي العلامة التجارية 
لأي منتج أو سلعة» وغالباً ما يوضع هذا الشعار في أعلى صفحة الويب» ويفيد هذا الشعار - إضافة 
إلى منح الموقع أو الصفحة هويتها الخاصة - في مساعدة المستخدم في التعرف على الصفحات التي 


:Navigation ja) -3 


يتوقع المستخدم أن يجد أدوات الإبحار في الغالب في الجزء العلوي الأيمن من الصفحة سواء استخدم 
المصمم قوائم أفقية أم عموديةء لذا يجب أن تكون هذه الأدوات واضحة وبسيطة» وفي الغالب في رأس 
f iaia‏ أعلى ال ۴١١١‏ وهو تعبير يستخدمه المصممون للإشارة إلى المحتوى أو المضمون الذي 
ينتهي على الشاشة قبل أن يزلق أو يسحب المستخدم الشاشة إلى الأسفل. 


E C [D www.caus.org.lb/Home/index.php Bs) = 


lllldn‏ | مركز دراسات 
الوحدة العربية 
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:Content ¢¢ sinall —4 


وهو من أهم العناصر التي يبحث عنها المستخدمون» ولهذه العناصر أصلاً يدخل المستخدمون إلى 
الموقع» فإن لم يجدوا ما يريدونه من نصوص ومحتوى معلوماتي فإنهم سيخرجون بسرعة» لذلك على 


المصمم أن يضع المحتوى النصي في المكان الذي يُعد بؤرة التركيز والاهتمام لدى المستخدمين. 
5- الهامش العلوي 00161!: 


ومكانه أعلى صفحة الويب» وعادةٌ ما يحتوي على عبارات: حقوق النشرء الاتصال بالموقع» المعلومات 
القانونية المتعلقة بالمعلومات المنشورة في الموقع» أقسام الموقع الرئيسيةء ولكونه الجزء الفاصل بين أعلى 
الصفحة ومنتصفها يجب أن يميّز بالنسبة للمستخدم لكي يصبح واحداً من المؤشرات التي تدله على 
أعلى الصفحة. 


6-المساحة البيضاء :Whitespace‏ 


وهي الحيز الفارغ من صفحة الويب الذي لا يحتوي عناصر تيبوغرافية أو غرافيكية» والذي يعمل المصمم 
عليها كورقة الرسم أو صفحة الجريدة أو المجلة» وتلعب المساحة البيضاء دوراً أساسياً في التكوين» فهي 
وسيلة لإراحة عين المستخدم من إجهاد التصفح وأداةٌ بيد المصمم dail‏ بين المواد والموضوعات 
وتنظيم العلاقة بينهاء مع ملاحظة عدم المبالغة في استخدامهاء والعمل على تحقيق التوازن في استخدام 
المساحات البيضاء والمعلومات الخلفية وضوابط شاشات العرضء فالزيادة في العرض تجعل للمساحة 
آثاراً جانبية مؤثرة لكون العرض أكثر إجهاداً للنظر ويبطئ مسح العين للمحتوى كزيادة الهوامش حول 
العناصر وكثرة الحدود» وحشد العناصر بعضها مع بعضء وقلة المساحة البيضاء بين السطور. 

وقد وجد المصممون أن استخدام المساحة في الموقع الإلكتروني بالعرض غير مرغوبة على عكس 
استخدامها بالطول» إلا إذا زادت عن مقدار ثلاث شاشات لأن المستخدم غالباً ما يهتم بالمجال المرئي 
للتصميم ونادراً ما يُنزل نظره إلى الأسفل. 

وفي التصميم ثنائي الأبعاد تشير المساحة البيضاء إلى كل من العمق الوهمي والحيز الذي يُمكّن 
المصمم من التلاعب في التكوين حيث يعطي العمق الوهمي للمساحة قوة وديناميكية وعمقاً في الرؤية 
داخل التكوين. 
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ترتبط المساحة أو الفراغ على الإنترنت : 
٠‏ بدقة شاشة الحاسوب ونوعها وامكانياتها التقنية. 
o‏ بمتصفحات صفحة الويب التي تختلف في أبعادها وقابليتها لاستيعاب الألوان وأحجام العناصر 
المكونة لصفحة الويب والخطوط المعتمدة في الكتابة» والتي يمكن أن يتلاعب بها المستخدم 
بطريقة تفاعلية من دون تدخل المصمم. 
ولذلك يتوقف الاستغلال الجيد للمساحة على مدى معرفة المصمم لأنواع المستعرضات وأحجام الشاشات 
| تقبلة وخصائ | لدى | تقبلير لبت <“ من وصول الموقع إلى `i ve‏ 5 مين من خلال 
مستعرضاتهم وشاشاتهم المختلفة. 


7-الأرضية 6101010: 


وتُعرف أيضاً بالمساحة السالبة» وهي مساحة الصفحة من دون أي شكل أو رسم» وقد تكون بيضاء أو 
بأي لون آخرء وقد تكون الأرضية عبارة عن نقش يُستخدم كخلفية للمحتويات والرسوم التي عرف 


بالمساحة الموجبةء ومثال على ذلك أن الفراغات حول النص ليست بالضرورة أن تكون خلفية فقد تكون 


ممم .ا 


| Epes 


صفحة الويب هي الأرضية. 


:Point 444i\-8 
صورة أو رسماً ما على‎ Pixels كما تكوّن مثات ال‎ 
شاشة الكمبيوترء فإن النقطة هي العنصر الأساسي في‎ 
التصميم المرئي» والنقطة عنصر ليس له مقياس أو بعد‎ 


إلا إذا حُسبت من إطار ما أو مرجع ماء فالنقطة في 





cas‏ ة قد يكون لها حجم وبعد واضحان» وهي علامة موجودة في الفراغ ومحددة الموقع› وهي 
shit lesa,‏ أن توفر العلاقة بين السلبية والإيجابية ف الفراغ» وعندما تجتمع نقاط عدة مع بعضها 
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بعضاً فإنها تكوّن ما يُعرف بالإغلاق في نظرية (الجشطلت)! حيث يقوم المخ بعملية إكمال الفراغ» وربط 
هذه المجموعة من النقاط لسد النقص وتكوين خط أو شكلء أو حتى لوحة متكاملة. 

وهناك علاقة قوية بين النقطة وال ا#×أ۴ (أصغر وحدة قياس في الشاشة الإلكترونية)» وهي واحدة من 
مئات الآلاف من النقاط على شاشة جهاز الكومبيوترء فإذا كان حجم شاشة الكومبيوتر 1260:1024 
بكسل مثلاًء فهذا يساوي 1310720 le Pixels‏ الشاشةء وهو ما نسميه (نقطة) في التصميم البياني» 


وال Pixel‏ هو أساس الصور والرسومات الرقمية» وكل نقطة في شاشة العرض تمثل „Pixel‏ 


:Line bAt\-9 


هو مجموعة من النقاط المتصلة» ويرمز إلى اتجاه 
ويدل على حركة أو يحدد حدوداً أو Saf‏ ويتمتع 
بخمس صفات هي: الطول والعرض» والانحناء 
والعمق والنقش. 

وتُعد الخطوط أكثر العناصر شيوعاً في تصميم 
الرسومات» وهو من أهم العناصر التعبيرية على 
شبكة الويب: 





o‏ عندما يكون الخط مائلاً يعطي الإحساس بالحركة والإثارة والطاقة. 


أالجشطلت 6654314117601165: وهي مجموعة النظريات المتخصصة في الإدراك الحسي والنفسي» والتي تبحث في 
كيفية التعامل مع الدماغ البشري وتنظيم المحلومات المرئية إلى فثات ومجموعات» وتحتي كيفية تعامل الدماغ البشري مع 
الكل بشكل مترابط» وتتكون الأجزاء المكونة له في ترابط ديناميكي فيما بينها من جهة» وبين الكل نفسه من جهة أخرى. 
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٠‏ عندما يكون أفقياً يولّد الإحساس بالترتيب والتمييز. 

o‏ عندما يكون الخط ذا زوايا حادة يعطي شعوراً بالخطر. 

« الانحناء والالتفاف اللطيف والتعرج للخط يعطي شعوراً بالارتياح والسلاسة. 
ه الخطوط ذات الزوايا القائمة تعطي طابعاً ميكانيكياً. 


o‏ عندما تكون الخطوط ذات منحنيات وزوايا متقطعة تعطي شعوراً بأنها معبرة جداً مثل خط اليدء 
والكتابة على الجدران والمخططات. 


ا الخطوط إما على الورق عند الرسم أو عمل المخططات المبدئية للموقع» واما تقنياً عن 
ريق الكمبيوقر من خلال شاشة العرض: 
0- الشكل :Shape‏ 
Gis‏ النقطة C) dal GLA dal) Las, tall,‏ 
الأشكال» وعندما تلتقي نهايتا خط ما يصبح شكلاًء C)‏ 


فالنقطة هي أصغر جزء على الصفحة» وأصغر جزء في 


الشكل» يليها الخط المغلق أو المتصلء والشكل عنصر E‏ 
ثنائي الأبعاد يتكون من مساحة وحدود وعرض وارتفاع» 


ويمكن أن يكون الشكل هندسياً كالمثلث والمربع والدائرة.. وغيرهاء أو يكون على هيئة أشكال حرة ذات 
انحناءات وخطوط خارجية غير منتظمة. 


يُخلق الشكل الهندسي كالدوائر والمثلثات والمستطيلات والأسهم والنجوم وغيرها من العلامات والأشكال 
عند التقاء نقطتي البداية والنهاية لخط ما لتكوين الشكل الهندسي» وهذه الأشكال تعطي إيحاءً بالتقنية 
والميكانيكيةء أما الأشكال الحرة فتسببها المنحنيات والزوايا العشوائية» وهي أشكال حرة مجردة من الشكل 


الهندسي تنقل الإحساس غير الرسمي والعفوية» وقد تكون أشكالاً هندسية تحولت إلى أشكال حرة. 
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ويرتبط الشكل بالأرضية التي يُرسم عليهاء وتشكل ] Te. | | C‏ 
هذه العلاقة أساس مفهوم الإدراك البصري للأشكال 

والأشياءء إذ لا يمكن رؤية الأشياء كأشكال إلا إذا ان 
فصلت عن الأرضية أو الخلفيةء فالأشكال تكون v‏ 
أبرز من الخلفية» ويمكن تحديد الفرق بين الشكل 
والأرضية كما يلي: 





- يُرى الشكل وكأنه خارج من الأرضية لكونه موجوداً عليها. 

- تبدو الأرضية خلف الشكلء فلا بد من أن تكون صورة معينة مستمرة» بحيث تبدو للمستخدم 
والمشاهد خلف الشكل. 

- يوحي الشكل بمعنى ماء في حين تبدو الأرضية ليس لها معنى نسبياً. 

- يمكن للمشاهد أو المستخدم رؤية الشيء نفسه كشكل أو كأرضية اعتماداً على كيفية توجيه 
انتباهه. 


:Form gòga) -11 


© 9ه 4 هه 


وهو شكل ثلاثي الأبعاد يتكون من شكلين أو أكثرء وله ارتفاع وعرض وعمقء ويتحدد النموذج في أربعة 
gall Sle‏ فى اد هي او اكه ا والمقروظ : ست السام الات اة 
والظلال للحصول على تأثير النموذج. 
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:Color (si!) -12 





هو الاستجابة السيكولوجية للمدركات» وهو إحساس وليس مادة يتكون من رد الفعل الفيزيائي للعين 
والتفسير الأتوماتيكي لاستجابة العقل لخصائص طول موجات الضوء عند مستوى وضوح معين» فاللون 
Iy‏ عبارة عن تأثير فسيولوجي خاص بوظائف أعضاء الجسم» وناتج عن شبكية العين عن طريق المادة 


الصبغية» أو عن طريق الضوء الملون الساقط على العين. 


رابعاً: نماذج إدراك الألوان 





نتيجة التداخل الضوني للألوان 
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هناك نموذجان رئيسيان لإدراك الألوان: الأول خاص بالكمبيوتر نموذج (RGB‏ والآخر خاص 
بالمستخدمين نموذج HSB‏ 


أولاً: نموذج 868 : 


يضم هذا النموذج الألوان الأساسية الثلاثة التي يتم 
عرضها على شاشة الكمبيوتر وهي: الأحمر 
والأخضر والأزرق» وتحتوي هذه الألوان على 
مجموعة من القيم اللونية» وكل لون من هذه الألوان 
له ست درجات» وبالتالي يكون حاصل ضرب 
6- 216 لوناً. وعندما تمتزج هذه الألوان 
بنسب متساوية تعطي اللون الأبيض» أما إذا 


امتزجت بنسب منخفضة فستعطي اللون الأسود. 


الالوان المكمله 





وتمتد قيم هذه الألوان من صفر إلى 255 درجة لونية» وبالتالي يمكن الحصول على 
6-» 16.777.216 درجة لونية» وهو أكثر مما تستطيع عين الإنسان cod‏ حيث 
يميز الإنسان نحو عشرة ملايين درجة لونية كحد أقصى. 
كانت شاشات الكمبيوتر القديمة تقوم بعرض الألوان عن SLA Gye Gls SSI) gal Gob‏ 
والمادة الفوسفورية المطلية بها الشاشة» إذ يُدفع ثلاثة ألوان رئيسية: الأحمر والأزرق والأخضرء وكل 
بيكسل علي الشاشة ملون أيضاً بالألوان الأساسية الثلاثة: 

o‏ عندما تندفع الإلكترونات الحمراء تنشط النقاط الحمراء» وبالطريقة نفسها تنشط النقاط الزرقاء 


٠‏ أما الألوان غير الأساسية فتنشاً عن اندفاع لونين أساسين» وظهور الألوان غير الأساسية كاللون 
Aa‏ مثا 
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o‏ أما اللون الأبيض فينشأ عن اندفاع ثلاثة ألوان» والأسود يعني عدم اندفاع الألوان. 


ثانياً: نموذج 188: 
يتعلق هذا النموذج بإدراك المستخدمين للألوان» ويتكون من ثلاثة عناصر: شكل اللون والإشراق (التشبع 
اللوني) والوضوح» وتسمى ألوان هذا النموذج بالألوان المدرّكة أو الألوان الذاتية: 
- شكل اللون أو الصبغة اللونية: وهو اللون المنعكس من الشيءء فهو اللون الفعلي الذي 
يتعامل معه المستخدم مثل الأحمر والبرتقالي والبنفسجي» ويحتوي شكل اللون على كل 
الألوان الواقعة في نطاق ألوان الطيف السبعة وهي: الأحمرء البرتقالي» الأصفرء الأخضر › 
الأزرق» السماويء البنفسجيء ويقاس شكل اللون من الدرجة صفر إلى 360 حول عجلة 
الألوان» حيث يأخذ اللون الأحمر القيمة صفرء واللون البنفسجي القيمة 360. 
- الإشراق أو التشبع اللوني: وتسمى أيضاً كروما 057101713» والتي تعني نقاء أو صفاء اللون 
أو كثافة وشدة اللون» أي كمية اللون الموجودة في عملية مزج الألوان» فاللون السماوي ينشأ 
من مزج اللون الأزرق بالأبيضء ولزيادة إشراقه وشدته يزاد الأزرق قليلاًء كما تعتمد شدة 
اللون أيضاً على معدل التدفق في كل طول موجي للضوء الذي يتضمن اللون. 
- الوضوح: وهو درجة إضاءة أو إظلام» أي هل اللون فاتح أم داكن» فيكون اللون داكناً إذا 
زادت إضاءة اللون الأسودء ويكون مضيئاً إذا زادت إضاءة اللون الأبيضء ويقاس وضوح 
اللون بدرجات من الصفر إلى المئة» والصفر يدل على اللون الأبيض والمئة تدل على اللون 
الأسود. 
وقد توصل الباحثون حول تحليل العواطف والآثار 
السلوكية التي تحدثها الألوان في نفوس 
المستخدمين إلى مجموعة من النتائج التي وُظفت 
عند اختيار الألوان وتدرجاتها في تصميم المواقع 
للوصول إلى التأثير المطلوب عند المستخدمين؛ 





نتيجة التداخل الضوني للألوان 
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وتدل النتائج على أن الألوان تُحدث التأثيرات التالية: 
- الأحمر: يؤدي إلى تحفيز الأدرنالين في الدم» وهو من الألوان المثيرة الدرامية والغنية» وهو 
لون العراطف ومشاعن الحب. 


- البرتقالي: وهو من الألوان الحيوية التي تمد بالطاقة والسعادة» والحماسة والإبداع» ويساهم 


في فتح الشهية. 
- الأصفر: وهو أيضاً من الألوان الحيوية» ويؤدي إلى الإحساس بالنشاط والسعادة والحركة 
والحذر. 


- الأخضر: ويرتبط بالطبيعة» فيعطي إحساساً بالنضارة والأمل» وهو أقل نشاطاً من الألوان 
السابقة. 

- الأزرق: وهو من الألوان المفضلة عالمياً لارتباطه بالسماء والبحار والمحيطات» وهو يرمز 
إلى الانفتاح والذكاء والإيمان» ويُستخدم في تهدئة النفس وتخفيف الشهية. 

- البنفسجي: وقد ارتبط هذا اللون بالملكية والسلطة والثروة» والزهور والأحجار الكريمة» لكنه 
أل الألوان استخداماً. 

- الأبيض: ويرمز إلى السلام والطمأنينة» والصفاء والنقاء» والفرح والنظافة. 


- الأسود: ويرمز إلى الموت والشرء والسلطة والقوة والرشاقة على حد سواء. 


خامساً: نظريات الألوان التي تفسر وجودها 
نظراً لما تؤديه الألوان من تأثيرات فعالة لكنها متباينة إلى حد كبيرء فقد توصل الباحثون إلى وضع 
نظريات للألوان تفسر وجودهاء وكيفية تفاعلها معاً عند مزج لونين أو أكثرء وهذه النظريات هي: 
أولاً: نظرية اللون: 
تقوم هذه النظرية على مجموعة من الأفكار الأساسية» وهي: 
- اللون الأبيض: لونٌ عديم اللون. 


- يظهر اللون الأسود عند مزج الألوان الرئيسية الثلاثة: الأحمر والأزرق والأخضر. 
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- إضافة اللون الأبيض إلى أي لون يؤدي إلى تفتيحه» واضافة اللون الأسود إليه يؤدي إلى 
قتامته. 
- مزج اللون الأحمر مع اللون الأصفر يعطي اللون البرتقالي» ومزج اللون الأحمر مع اللون 
الأزرق يعطي اللون البنفسجيء ومزج اللون الأصفر مع اللون الأزرق يعطي اللون الأخضر. 
ثانياً: نظرية الضوء: 
تقوم هذه النظرية أيضاً على مجموعة من الأفكار الرئيسية التالية: 
- اللون الأسود هو اللون عديم اللون» وعند عدم وجود إضاءة فلن يظهر أي لون. 
- مزج الألوان الأساسية الثلاثة: الأحمر والأزرق والأخضرء سيؤدي إلى ظهور اللون الأبيضء» 
وهو ما يتفق مع نظرية إسحق نيوتن الذي قال إن مزج كل الألوان يؤدي إلى ظهور اللون 
الأبيض» وهر ما يعرف بنظرية .RGB‏ 
- إضاءة المصباح الأحمر والمصباح الأزرق تؤدي إلى ظهور الضوء البنفسجي. 
- إضاءة المصباح الأحمر والمصباح الأخضر تؤدي إلى ظهور الضوء الأصفر. 
- إضاءة المصباح الأزرق والمصباح الأخضر تؤدي إلى ظهور الضوء القرمزي. 
- تنتج الدرجات اللونية عن اختلاف شدة إضاءة كل لون على حدة» وتختلف درجة اللون 
الناتج عن امتزاج لونين معاً حسب نسبة كل لون منهما. 
- إضاءة المصباح الخافت تؤدي إلى ظهور اللون الرمادي» وهو اللون الوسط بين اللون 
الأبيض الناتج عن إشعال المصابيح ذات الألوان الرئيسية معاء وعن عدم إضاءتها معاً. 
-. تطيق هذه النظرية على قناشات الكمييوتن» وشاشاك اللفزيون» والماسحاتك الضوفية» وذلك 
باستخدام مزج الألوان الرئيسية الثلاثة لإعطاء مجموعة كاملة من الألوان. 


ثالثاً: نظرية :CMYK‏ 
تقوم هذه النظرية على طرح الألوان الثلاثة: سيان - ماجينتا - أصفر من ألوان الجمع الأساسية الثلاثة؛ 
وحسب هذه النظرية: 

- تعريض اللون الأصفر والقرمزي للضوء يعطي اللون الأحمر. 

- تعريض اللون الأصفر واللون السماوي الفاتح (السيان) للضوء يعطي اللون الأخضر. 

- تعريض اللون القرمزي واللون السيان للضوء يعطي اللون الأزرق. 
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جمع الألوان الأساسية الثلاثة يعطي اللون الأسود. 

تطبق هذه النظرية على عمليات الطباعة الإلكترونية وفرز الألوان» فالألوان لا تُخلط وإنما 
طبع على شكل نقاط صغيرة لكل لون أساسي على حدة» وهي قريبة من بعضها أو فوق 
ها لقنو الان خط ناسا 


الألوا ان Primary‏ 
الأساسية 










Tertiary Tertiary 


Secondary 


Secondary 


Tertiary Tertiary 





Primary Primary 


Tertiary Tertiary 


Secondary 





نتيجة التداخل الضوئ للألوان 
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الالوان المكملة 





ماجنا أصفر سيان 
سادساً: عجلة الألوان 
لتوضيح تأثيرات الألوان السيكولوجية المتباينة على المستخدمين» ولفهم العلاقة بين الألوان جميعهاء وبين 
كل لون على حدة تم تطوير عجلة الألوان» وصُنفت ورتبت الألوان فيها إلى مجموعات» كما في الشكل 
التالي: 
- الألوان الثلاثية: وهي أي ثلاثة ألوان متساوية المسافات في العجلة اللونية» وثنافس هذه 
الألوان بعضها بعضاًء لذا يجب إبعاد الموضوعات التي يجب إبرازها عن هذه الألوان. 
- الألوان التمائلية: وهي الألوان التي لها أساس مشترك كالأحمر والبرتقالي والأرجواني» وهذه 
الألوان هي التي يمكن استخدامها لخلق الإحساس بوحدة الصفحة أو وحدة المادة. 
- الألوان الدافئة: وهي الألوان التي تقع في نصف العجلة اللونية العلوي» وتضم اللون الأحمر 
ومشتقاته. فهي المفضلة في جذب الانتباه» مع الانتباه إلى عدم الإكثار منها. 
- الألوان الباردة: وهي الألوان التي تقع في الجزء السفلي من العجلة اللونية» وتضم اللون 
الأزرق ومشتقاته» وتصلح هذه الألوان لخلفيات صفحة الويب» لكن المبالغة في استخدامها 
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تعطي إحساساً بالسلبية» وقد يتعارض مع هدف الرسالة لذلك من المفضل مشاركتها مع 
الألوان الدافئة حتى تعطي الأحاسيس المتباينة والمختلفة كالعمق والفراغ. 

- الألوان المكملة: وهي الألوان التي تقابل بعضها على العجلة اللونية من خلال خط مستقيم 

يصل بين كل لونين متقابلين» وبذلك فاللون السيان يقابل اللون الأحمر ويكمله» ويفضل عدم 


استخدام الألوان المكملة في النصوص والأرضيات. 





| و“ 
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سابعاً: أسس وقواعد استخدام الألوان 
يتحكم في استخدام الألوان في تصميم موقع الويب مجموعة من القواعد التي يجب على المصمم اتباعها 
dai,‏ بها لإحداث التأثير اللوني المطلوب» ومن هذه القواعد: 
1 - التوازن: 
والمقصود به إحداث التوازن بين الأسود والأبيض أي بين أشكال الحروف المستخدمة والأرضية 
أو الخلفية» لذا يفضّل عدم استخدام الخلفيات المزركشة أو المنقطة أو ذات النقوش» واستخدام 


الخلفيات البيضاء أو الزرقاء ذات الدرجات اللونية المنخفضة؛ ولكي يحصل الإدراك البصري 
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يجب إحداث التباين بين الأشكال والخطوط والحروف عن الخلفيات» حتى تتحقق الانقرائية 
والرؤية الواضحة. 

2 >-التياين: 
ويقصد به وجود قدر من الاختلاف بين المتن والخلفية لتحقيق الانقرائية» كما سبق ذكرهء 
فاستخدام درجات لونية متقاربة لكل من العنصرين يحقق صعوبة في القراءة» والألوان ذات الطول 
الموجي القصير (كالألوان الباردة: الأزرق والأخضر والبنفسجي) أفضل في الاستخدام خاصة 
في الخلفية من الألوان ذات الطول الموجي الطويل (كالألوان الحارة: الأحمر والبرتقالي 
والأرجواني والأصفر).» لكن المبالغة في تحقيق التباين أمر يؤثر على درجة الانقرائية عند 
المستخدم» ويفضل استخدام درجات لونية خفيفة للعناوين أو المقدمات أو المتن» لا خلط بينها. 

3- البساطة: 
بمعنى عدم زيادة عدد الألوان المستخدمة في التصميم عن لونين أو ثلاثة مع مراعاة استخدام 
الألوان البارزة للعناصر الأكثر أهمية كالعناوين» والروابط التشعبية التي يُستخدم لها في الأغلب 
اللونان الأزرق والأحمر. 

4- التوافق اللوني: 
أي استخدام عدد محدد من الألوان المريحة للعين» وغير المتداخلة التأثيرات» مثل استخدام اللون 
الأحمر الساطع» والأزرق الساطع بشكل متجاور حتى لا يحصل ما يطلق عليه الباحثون التوتر 
اللوني أو الإجهاد البصريء وعلى سبيل المثال يفضّل استخدام اللون الأزرق الفاتح للأرضيات 
والخلفيات» وعدم استخدامه في المتن لأن عدسة العين تمتص مرتين اللون الأزرق» نظراً لنقص 
الصباغات الزرقاء في العين. 
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خاتمه: 
يقوم تصميم المواقع الإلكترونية على بناء وترتيب العديد من العناصر البنائية بدءاً بمساحة الشاشة التي 
تشكل الأساس الذي توضع عليه العناصر البنائية الأخرى» مروراً بالنقط والخطوطء والأشكال والنماذج» 
والنصوص والهوامش والمساحات البيضاءء وانتهاءً بالألوان التي تضفي على الصفحة تأثيرات جماليةء 
وتأثيراتِ نفسية وإدراكية مختلفة تساعد المصمم في إيصال الموقع المصمّم إلى أكبر عدد من 
المستخدمين» وتحقيق حاجاتهم ومتطلباتهم. 


وتشترك هذه العناصر البنائية مع مجموعة من العناصر البنائية الأخرى كأدوات التجول والعناصر 
التفاعلية» والمحتوى الرسومي والنصء والألوان والوسائط المتعددة في بناء الصفحة الرئيسية الأولى 
للموقع» والتي يعدها الباحثون مرآة الموقع وهويته والبوابة التي سيدخل المستخدم من خلالها إلى الموقع» 
ويقرر هل وجد فيها ما يريده ويطلبه» أم أنه سينتقل إلى موقع آخرء وهو ما سيتم التعرض له في الوحدة 
التالية. 
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الخلاصة 
تصميم المواقع الإلكترونية هو عملية ترتيب العناصر البنائية بصورة منسجمة ومتناغمة» بحيث تدعم هذه 


العناصر بعضها بعضاً مع مراعاة أن لكل عنصر منها وظيفته التي يؤديها داخل هذا التصميم. 


وتتعدد العناصر البنائية المستخدمة في تصميم المواقع الإلكترونية على الرغم من أن المستخدمين قد لا 
يدركون مفهوم الكثير من هذه العناصر أو حتى وظائقهاء لكنهم يتصفحون ويفضلون المواقع التي 
تستطيع أن توظف هذه العناصر بشكل يتناسب مع حاجاتهم وتفضيلاتهم؛ ومن هذه العناصر: كتلة 
المحتويات أو التكوين العام» والنقط والخطوطء والأرضيات والمساحات البيضاء» والنصوص والصورء 
والشعارات والأيقونات» والألوان وما يتعلق بهذا العنصر من قواعد وأسس ونظريات تؤطر لعملية 
استخدامها وتوظيفها الأمثل في تصميم صفحة الويب كنموذج ۸68 للألوان الأساسية الثلاثة» ونموذج 
HSB‏ والتشيعات: اللونية؛ وكندة الألران ووكطوحياء ونظريات الألوات؛ ونظرية الكوء» ونظرية CMYK‏ 
للألوان المطروحة من الألوان الأساسية الثلاثة» وأخيراً عجلة الألوان وتأثيراتها اللونية النفسية والإدراكية 


المعلومات الإضافية: 


الجشطلت 6©51431111601165: وهي مجموعة النظريات المتخصصة في الإدراك الحسي والنفسي» 
والتي تبحث في كيفية التعامل مع الدماغ البشري وتنظيم المعلومات المرئية إلى فئات ومجموعات» 
وتعني كيفية تعامل الدماغ البشري مع الكل بشكل مترابط» وتتكون الأجزاء المكونة له في ترابط ديناميكي 


فيما بينها من جهة» وبين الكل نفسه من جهة أخرى. 
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التمارين 

اختر الإجابة الصحيحة: 

من أف التخاصين افا ري adel cya‏ بدن الم حضون الى االمرقم اتون 
الشكل. 

الموج 


المحتوى. 
. اللون. 


U O W > 


الإجابة الصحيحة: : © المحتوى 
تسمى مجموعة الألوان التي تقع أعلى العجلة اللونية: 


. الألوان الثلاثية. 
. الألوان المكملة. 


. الألوان الدافئة. 


U O WwW > 


. الألوان الباردة. 


الإجابة الصحيحة: © الألوان الدافئة 
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هو شكل ثنائي الأبعاد» ومن العناصر البنائية المهمة: 


6. الشكل. 
8 الغطوط, 
€ التموذج, 


الإجابة الصحيحة: ۸ الشكل 
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الوحدة التعليمية السادسة 


عناصر تصميم الصفحة الرئيسية 


العناصر 0 


- مقدمة. 

0 أقسام الصفحة الرئيسية. 
o‏ قواعد تصميم الصفحة الرئيسية. 
عناصر تصميم الصفحة الرئيسية: 
٠‏ أدوات الإبحار. 

٠‏ عناوين الأقسام. 

« المحتوى النصي. 

٠‏ المحتوى الرسومي. 

و :كخطيط الصفحة: 

o‏ الألوان. 

ه. الوسائط المتعددة. 

ه العناصر التفاعلية. 


” 


- خاتمة. 
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الأهداف التعليمية: 

بعد دراسة هذه الوحدة التعليمية يجب أن يكون الطالب قادراً على أن: 
=i‏ يشرح تصميم الصفحة الرئيسية. 
2- يحدد أقسام الصفحة الرئيسية. 
3- يذكر قواعد تصميم الصفحة الرئيسية. 


4- يشرح عناصر تصميم الصفحة الرئيسية. 


الكلمات المفتاحية: التصميم - الصفحة الرئيسية - واجهة الاستخدام - عناصر تصميم الصفحة 
الرئيسية - الترويسة - اللافتة - الشعار - العنق - الجسم - القدم أو الذيل - عناصر التجول - 
التجول الخطي - التجول الهرمي - التجول الحر - التجول المركب - الروابط التشعبية - عناوين 
الأقسام - المحتوى النصي - المحتوى الرسومي - تخطيط الصفحة - الألوان - الوسائط المتعددة - 
العناصر التفاعلية. 


أولا: مقدمة 

واجهة الاستخدام أو الصفحة الرئيسية» هي 
الصفحة الأولى التي يراها المستخدم عندما يدخل 
إلى موقع الويب» لذا يجب أن تحمل الملامح 


البارزة لهذا الموقع من حيث اللون والتصميم» ونوع 
الخط وأدوات الإبحار وغيرُها من الملامح: 





ولأنها ستعطي الانطباع الأول عن الموقع فيجب أن تكون مميزة عن باقي صفحات الموقع حتى تشجع 
المستخدم على استخدام باقي الصفحاتء وتجعله يتذكر هذا الموقع. 
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ويراعي المصمم في تصميمه لهذه الصفحة أنها بوابة الموقع» وبالتالي هناك العديد من الأهداف التي 


يجب أن تتحقق من خلالها: 
٠‏ كأن تجذب انتباه المستخدمين واهتمامهم من خلال التركيز على المواضيع المهمة. 
o‏ تزويد الصفحة الرئيسية بروابط تشعبية إلى الموضوعات الأخرى. 
o‏ تحميل الصفحة الرئيسية سريعاً لتجنب هروب المستخدمين إلى مواقع أخرى. 


ويعتمد المصمم في ذلك على مجموعة من العناصر البنائية لتحقيق هذه الأهداف مثل: عناصر التجوال 
أو الإبحارء وعناوين الأقسام أو الصفحاتء والمحتويات النصية والرسومية» وخريطة الموقع» ومحتويات 


الوا calc, tae‏ ران وهو ما تفرك له هذه الوحد ةب التفصيول: 


ثانياً: تصميم الصفحة الرئيسية 


a 


الوكالة المزبهة السورية للاتها. 


* مال وأعمال صور سانا فيذيو سانا المحافظات > 





لا يختلف مفهوم تصميم الصفحة الرئيسية عن مفهوم تصميم الموقع الإلكتروني ككل» فهو عملية ترتيب 
وتنظيم العناصر البنائية لهذه الصفحة عبر أجزائها المختلفة لتساعد المستخدم على سهولة تصفحهاء 
والحصول على المعلومات المطلوبة من خلال خلق انطباع إيجابي أولي عن هذا الموقع. 
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ولسهولة تنظيم وتوزيع هذه العناصر فقد توافق المصممون على تقسيم الصفحة الرئيسية للموقع 
الإلكتروني إلى ثلاثة أجزاء: الترويسة !118206 وجسم الصفحة 800۷ وذيل الصفحة 500167 وإن 
كان بعضهم يفضل إضافة القوائم الجانبية إليهاء ووضع العناصر المهمة في كل قسم من هذه الأقسام 
حسب أهميته الشكلية والوظيفية للموقع الإلكتروني» بحيث يحوي مجموعة العناصر التي تعبر عن 


ثالثاً: أقسام الصفحة الرئيسية 
[ - الترويسة sHeader‏ 


يشكل هذا الجزء من الصفحة الرئيسية أحد الأجزاء المهمة والأساسية في صفحة الويب لأنها تعطي 
للموقع هويته الشكلية والوظيفية» وهي الجزء العلوي من الصفحة»ء ومن خلالها يحمل الموقع سمات تميزه 
عن المواقع الأخرى» والجزء العلوي يحمل العناصر الثابتة تقريباً في الصفحة مثل (اللافتة - الشعار - 
العنق - الروابط الأفقية - الشريط الإخباري). 


أ- اللافتة: وهي العلامة المميّزة للموقع» وتحمل شخصية الموقع واتجاهاته» لذلك يهتم المصمم 
بها بشكل كبير من خلال إضافة مؤثرات حركية ولونية أحياناًء وتكون مختصرة وواضحةء 
وتستخدم فيها حروف كبيرة وبارزة لكي يتميز الموقع من خلالهاء ومن خصائصها الثبات 
والاستقرار نسبياً لمدة طويلة. 

ب-الشعار: وهو أيضاً من العناصر الثابتة في تصميم الصفحة الرئيسية» وهو شكل رمزي يرافق 
اللافتة مكون من مجموعة من الخطوط المعبرة عن توجه الموقع» وقد يختلف مكان الشعار 
من موقع إلى آخر. 

ت-العنق: هو حيز ضيق يوضع للفصل بين رأس الصفحة وجسمهاء وذلك لإبراز التباين في 
الصفحة» ويمتد العنق بامتداد رأس الصفحة» ويحوي عادةً على الروابط الأفقية التي تشير في 


الغالب إلى معلومات خاصة بالموقع مثل (اتصل بنا - تصفح 04م - الأرشيف..إلخ). 
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‘Body auall-2 


وهو الجزء الذي يلي العنق» ويحوي الأعمدة التي يتم بداخلها توزيع المحتوى المعلوماتي وباقي العناصر 


المكوّنة للصفحة كالإعلانات» والوصلات التشعبية» وغيرها. 
3-ذيل الصفحة /10016: 

وهو الجزء الأخير من الصفحة؛ من الأجزاء المهمة أيضاً لأنه يحوي معلومات مهمة عن جهة إصدار 

الموقع» والجهة المصممة له» وكذلك معلومات عامة عن الموقع مثل سنة الانطلاق على الشبكة أو 

يمكن تضمينه بعض الوصلات التي تسمح للمستخدم الاشتراك في بعض المواقع» أو قد يتضمن قائمة 


محتويات الموقع حتى لا يعود المستخدم إلى أعلى الصفحة للتعرف على محتوياته. 







ww MWA Pyco Español HX Türkçe Français English 2015 / 12 / 19 


اللافتة والشعار 


S T TS AT. EAE NET E E O‏ 027 221 ا 00 ال 


a 5" SONS 


99,9 وكيري: الشعب السور 


رابعاً: قواعد تصميم الصفحة الرئيسية 


للوصول إلى تصميم جذاب ومثير للاهتمام للصفحة الأولى بحيث تشكل حافزاً للمستخدم لتصفح الموقع: 


وتحتفظ به أطول فترة ممكنة يراعي المصمم تحقيقّ العديد من المبادئ» ومنها: 


PCRs By anal, jell Gu teal =| 
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ب-الانسيابية: حتى يستطيع المستخدم الانتقال من عنصر إلى آخر بيسر وسهولة. 

ت-الاتجاه: لتوجيه المستخدم باتجاه مدروسء وعدم تركه يتجول من دون هدف بحثاً عن مكان 

ث-البنية: تنظيم بنية العناصر البنائية على الصفحة بشكل هرمي من المهم إلى الأقل أهمية. 

ج- الطابع: ويتمثل في اختيار نظام الألوان وتنسيق النصوص والصورء مما يؤدي إلى تحديد 
Asal ates‏ 


ويأخذ المصمم بعين الاعتبار أن المستخدم غير صبورء 
وأنه سرعان ما سيترك الموقع إذا لم يجد فيه ما يتوقعهء 
وكان تحميله بطيئاًء واذا لم يكن مثيراً للاهتمام» وكان 
Cia‏ هذا الموقع ومحتواه غير واضح. 

والصفحة الرئيسية هي التي سيقرر من خلالها الدخول 





إلى الصفحات التالية أو سيتحول إلى موقع آخرء ويشبّه البعض الصفحة الرئيسية بغلاف المجلة الذي 
يجب أن يكون جذاباً لإثارة انتباه القراء وسنط عدد كبير من أغلفة المجلات؛ ومساعداً على التعرف على 


محتويات المجلة من خلال وضع العناوين المهمة التي تعبر عن موضوعات المجلة ومضمونها. 


خامساً: عناصر تصميم الصفحة الرئيسية 


تضم الصفحة الرئيسية بشكل عام مجموعة من 
المكونات التي يستخدمها المصمم لتوضيح هدف 
هذا الموقع من Aga‏ وتيسير استخدام الموقع من 
جهة أخرىء وذلك بالاعتماد على إبراز هذه 


في: 
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فهرس يوضح التوزيعات الأساسية للمحتوى داخل الموقع والعلاقات بينهاء وهو ما يساعد في فهم خريطة 
التجول والإبحار. 

1- ملخص لأهم الموضوعات والأخبار التي سيتصفحها المستخدم. 

2- عنوان البريد الإلكتروني للموقع بقصد التفاعل والتواصل بين المستخدم وصاحب الموقع. 

3- آليات البحث داخل الموقع. 

4- بعض المواقع تضيف إجراءات للوصول إلى الموقع مثل كلمة السر وغيرها من البيانات 

الشخصبية المطاوية. 

5- شعار المؤسسة التي يتبع لها الموقع» والبيانات التي تعبر عن هدف الموقع ومحتواه. 

6- خدمة البحث المباشر داخل الموقع. 
ويُراعى في هذا التصميم البساطة» والاستغلال الأمثل للمساحات البيضاءء وتجزئة الصفحة إلى مقاطع 


أو إطارات قليلة» وعدم استخدام وصلات غير ضرورية. 


كما يعتمد المصمم على جملة من عناصر التصميم المهمة والضرورية لمساعدة المستخدم على تصفح 


الموقع بسهولة وسرعة» ومن هذه العناصر: 


:Navigation التجول‎ palie أولاً:‎ 





وهي من أهم عناصر واجهة الاستخدام لأنها وسيلة 
| لمستخدم للتعرف غلى المكان الموجود فيه» وعلى 
المكان الذي يمكن أن يذهب إليه» وكيف يمكن أن 
Fars ala‏ على المعلومات التي يبحث عنهاء 
ومن أمثلة عناصر التجول الأزرار والارتباطات 


التشعبية. 


C 
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وقد أظهرت الدراسات أن أصناف المستخدمين للمواقع تختلف وتتنوع» فمنهم من يتصفح الموقع للتصفح 
فقطء أو بهدف البحث عن معلومة معينة» وبعض المتصفحين يعرفون بالضبط عما يبحثون» وبعضهم 
الآخر ليس لديه فكرة عما يبحث» ويتحدد نجاح الموقع في معرفة المصمم ماذا يريد المستخدمون؛ 
ومساعدتهم في الوصول إلى المعلومة التي يبحثون عنهاء ولذلك فإن هناك استراتيجيات عدة لتوجيههم 
إلى مناطق معينة داخل الموقع» وأشهرها إبراز الارتباطات التي تؤدي إلى المنطقة المطلوبة» ويوجد خيار 
آخر وهو إعادة توجيههم إلى المحتويات التي يريدها صاحب الموقع بعد أن وصلوا إلى نقطة توقف في 
بنية التجول. 

ومهما كانت آلية التجول المتبعة في الموقع 
فإنه يجب ضمان وضوح الخيارات المتاحة 
للتجول» وأن المستخدمين يستطيعون أن 
يختاروا المسار الذي يريدونه» كما هو حال 
شريط القوائم أو شريط التجول وهو على 
شكل صف من الرموز المعنونةء 


IAL 





إذ يوضع دائماً في المكان نفسه على كل صفحة من صفحات الموقع» وأحياناً لإضفاء مزيد من قابلية 
الاستخدام يضاف إلى الرمز في القسم الذي يوجد المستخدم حالياً فيه إضاءة لتعطي المستخدمين 
إحساساً بالمكان. 

ويحدد عنوان الموقع 0063101 | JR: Uniform Resource‏ المكانَ الذي يوجد فيه المستخدم» أما إذا 
نسي المستخدم أين كان» فإن الروابط التشعبية تدله على ذلك» فالروابط باللون الأزرق تشير إلى الروابط 


التي لم يزرهاء أما الروابط باللون الأحمر أو البنفسجي فتشير إلى المواقع التي سبق أن زارهاء وأما إذا 
تساءل المستخدم إلى أين يذهبء فإن الروابط التشعبية تدله على ذلك» وكذلك القوائم الأفقية والجانبيةء 


والقوائم السفلية» ويمكن أن تأخذه إلى المكان الذي يريده. 
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تقنيات التجول: 

يعد الإبحار عبر النص المتشعب جزءاً أساسياً لتصميم صفحات الويب ولاسيما الصفحة الرئيسية 
وتسمح شبكة الويب للمستخدم بالانتقال من صفحة إلى أخرى داخل cad gall‏ أو إلى موقع آخرء وهناك 
طرائق عدة للتجول داخل الموقع يصل من خلالها المستخدم إلى المعلومات التي يبحث عنها داخل 
الصفحة الرئيسية أو خارجها في صفحات الموقع» يمكن التطرق لها كالتالي: 


1- الانتقال الخطي 113171931101 16231أا: حيث ينتقل المستخدم داخل الصفحة» ومن صفحة 
إلى أخرى في الموقع» وذلك بالانتقال إلى الصفحة التاليةء أو الرجوع إلى الصفحة السابقة فقطء 
كما في الشكل التالي: 


2- الانتقال الهرمي :Hierarchical Navigation‏ وهو الانتقال داخل کل قسم من أقسام 
الموقع على شكل شجرة متفرعة سواء كان باتجاه الفروع أم العودة إلى الأصل» ليتمكن المستخدم 
بعد ذلك من الانتقال إلى قسم آخرء وذلك كما هو مبين في الشكل التالي: 


کے 
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3- الانتقال الحر Jey) pasina eas ua (Nonlinear Navigation‏ بشكل حر من أي 
جزء في الصفحة إلى أي جزء آخرء أو من أي صفحة إلى صفحة أخرىء كما هو مبين في 


الشكل التالي: 





Composite Navigation sya!) Jy! -4‏ ويعتمد أساساً على الانتقال الحر في معظم 
الأقسام» لكن يمكن أن يتغير إلى الانتقال الخطيء أو الهرمي إذا استلزم الأمر» مثل حالات 
الرسوم المتحركة أو المعلومات المرتبطة ببعضهاء كما هو مبين في الشكل التالي: 


== 


أنواع عناصر التجول: 
أما بالنسبة لأنواع عناصر التجول» فيظهر منها أنواع مختلفة على الصفحة الرئيسية» ومن هذه الأنواع: 


1- التجول بواسطة الارتباطات النصية: وهي من أشهر طرق التجوال» فهي تربط الصفحات وتتيح 
للمستخدمين إمكانية الانتقال إلى صفحات جديدةء وتوجد ثلاثة أنواع من الارتباطات النصية: 
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أ- ارتباطات التجوال البنيوية: ومثال هذه الارتباطات: الأزرار والارتباطات التي توضع في 
الصفحة الرئيسية» وتقود المستخدم إلى مجموعة من الصفحات المتفرعة عن الصفحة 
الحالية. 

ب- الارتباطات التراتبية ضمن محتويات الصفحة: وتوجد داخل النصوص المكتوبة وهي عبارة 
عن كلمات تشير إلى صفحات تحتوي على المزيد من المعلومات عن موضوع النص. 

ج- الارتباطات بقوائم من المراجع الإضافية: تساعد هذه الروابط في العثور على المزيد من 
المعلومات إضافة إلى المعلومات الحالية» ولسهولة الاستخدام تلوّن الروابط باللون الأزرق 
ويوضع تحتها خط. 

2- روابط الخرائط وجداول الصور: يمكن للصور أيضاً أن تعمل كروابط كأن تربط صورة بصفحة 
أخرىء أو أن تربط أجزاء مختلفة من الصورة بصفحات مختلفة» وتوجد ثلاثة أنواع من الصور 
يمكن استخدامها كروابط وهي: 

أ- روابط الصور: ويستخدم هذا النوع في شعارات الصحف الذي يرتبط عادة بالصفحة 
الرئيسية. 

ب-خرائط الصور: وهي عبارة عن مجموعة من الصور تحتوي كل واحدة منها على عدد من 
الروابط يقترن كل واحد منها بجزء معين من الصورة» ولو تخيلت صورة لخريطة العالم فعند 
التحويم بالفأرة على دولة معينة مُفعّلة برابط موقع هذه الدولة» تظهر لك بيانات هذه الدولة. 


3- التجول بواسطة الإطارات: تتيح الإطارات إمكانية تقسيم نافذة المستعرض إلى مناطق منفصلة 
يمكن تمرير كل واحدة منها على حدة؛ وأهم الاستخدامات الشائعة للإطارات: عزل أدوات التجول 
في إطار واحد يبقى دائماً في المكان نفسه على الشاشة» وعرض الصفحات التي يتم طلبها 
باستخدام النصوص التشعبية في إطارات أخرى حتى يستطيع المستخدمون التجول ضمن الموقع 
دون أن يفقدوا طريق العودة إلى الأجزاء الأخرى على اعتبار أن الإطارات تحافظ على أبعادها 


ومواقعهاء ولو تطلبت من المستخدمين بعضّ عمليات التمرير للأعلى والأسفل. 
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4- التجول بالأزرار: نُصمم الأزرار بأكثر من حالة: 

أ- الحالة الطبيعية أو حالة الاستقرار: وهو الشكل الذي يأخذه الزر بانتظار تفعيله. 

ب-حالة مرور الفأرة فوق الزر: كالإضاءة التي تحدث كلما تحرك مؤشر الفأرة فوق زر قابل للعمل 
أو عند الانتقال إليه باستخدام مفاتيح الأسهم أو المفتاح 130» وهذه الحالة الانتقالية يمكن أن 
تساعد المستخدمين على تتبع حركة مؤشر الفأرة» وابراز عنوان الزر بشكل واضح. 

ت-حالة الضغط: إذ يأخذ الزر شكلاً مختلفاً عند النقر عليه» وقد يتم أيضاً إرفاق هذه الحالة 


وفائدة تفعيل الأزرار من خلال تغيير لونها أو شكلها أن تجذب انتباه المستخدم للضغط عليها 
والاطلاع على محتواها مثل مفاتيح التصويت والاستفتاءات» وكذلك فالأزرار المفعلة تضفي 


الطابع الديناميكي للتصميم. 


5- التجول بالتحويم: عناصر التحويم 1/101015601615 أو 1401101615 هي عناصر مصممة بحيث 
يطرأ عليها تغيرات مرئية في أثناء تفاعل الفأرة معهاء وتوجد أشكال مختلفة لتأثير التحويم مثل 
عرض رسالة مخصصة في شريط الحالة ضمن نافذة المستعرض أو إظهار إضاءة أو ظل عند 
المرور بمؤشر الفأرة فوق الصورة. 

6- القوائم المنبثقة Pop-up Menus‏ ,9 القائمة التي تظهر عند التحويم بمؤشر الفأرة فوق 
أحد خيارات التجول» وهذه القائمة تتسع للخيارات التي تم إنشاؤها في البنية الهرمية للموقع. 

(a, :Pull-down Menus 4tacial) ilgili —7‏ تعمل على تقديم لائحة من الخيارات لنقل 
المستخدم إلى الصفحة المناسبة عند تحديده أحد الخيارات» وغالباً ما تخدم في القوائم الرئيسية 


الأفقية للصفحة. 
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أماكن عناصر التجوال: 


أماكن is‏ “ : هناك ` ie teres‏ مه Í‏ ‘ : فوقى» تحت» 2 oe‏ 
ak dl ett qualia ae‏ تاق تارضم عاضر الا eA‏ تحت مار مين 


رفي ملعف الف 


الإبحار العلوي: ومكانه أعلى ALA‏ وفي 
الشكل التقليدي لتصميم الصفحة الرئيسية فإن 
القمة هي موضع قوائم الإبحارء لكن المأخذ على 
هذا المكان اختفاء هذه الأدوات عند النزول 





أسفل الصفحة»ء وبالتالي على المستخدم العودة إلى الأعلى للاستمرار في الإبحارء ويمكن التغلب على 
هذه المشكلة بتثبيت عناصر الإبحار العلوية» واستخدام رابط العودة إلى الأعلى أو وضع روابط نصية 
أسفل الصفحة تحاكي قوائم الإبحار العلوية. 


- الإبحار السفلي: معظم المصممين لا يقتنعون 
بهذا المكان على الرغم من فائدته في عدم 
مزاحمة العناصر العلوية للإبحار لشعار 
الموقع لأنه يتطلب سحب الشاشة إلى الأسفل» 
أو لأن الصفحة الأولى تمتد على أكثر من 
شاشة ولحل هذه المشكلة . يمكن Can‏ 
عناصر الإبحار السفلية في الأسفل. 
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- الإبحار الجانبي الأيسر: وهو من الأماكن 
الشائعة في العناصر الناطقة باللغات 
الأجنبية» ومن المآخذ على هذا المكان 
a‏ المساهة: التخصصية dapi‏ 
cil gine‏ الصفحة الرئيسية: 





- الإبحار الجانبي الأيمن: وقد أصبح هذا 
المكان شائعاً لأنه يجعل عملية الإبحار بعيدة 
عن المحتويات الأساسية للصفحةء هذا إضافة 
إلى أن المكان الأيمن BH bpd oo lath‏ 


الصفحةء مما يساعد في حركة الفأرة. 


- الإبحار المركزي (في المنتصف): ويتم من 


خلال وضع أزرار أو خرائط صور في وسط 


re ee 


الصفحة» وهذه الأدوات قد تزاحم محتويات Bi is‏ 


1 


الصفحة النصيةء لكنها تساعد المستخدم على 
التركيز على منتصف الصفحة الرئيسيةء 


ويذلك تتميز عن باقي الصفحات. 
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وهي العناوين التي تبين محتويات الصفحة وتشكل عناصر الإبحار البنيوية التي تساعد المستخدم في 
الانتقال إلى الموضوعات المطلوبة في الصفحات الأخرىء وغالباً ما توضع هذه العناوين أعلى الصفحة 
و ‘i‏ منتصفها. 


ثالثاً: المحتويات النصية :Text Content‏ 
وهي المحتويات النصية الموجودة في مركز 
الصفحةء وهي من أهم العناصر التي - كما سبق | 
Reel j‏ 
ذكره - من أجلها يدخل المستخدم الموقع» وغالبا a‏ 
ما ُستخدم في كتابة هذه النصوص أنواع الخطوط 
المتعارف عليهاء والتي يمكن أن تدعمها أشهر 
برامج التصفح» وعندما لا يستطيع المتصفح 














دعم الخط المستخدم» فإنه يقوم بتحويل الخط إلى أقرب نوع خط من الخطوط المتاحة» ومن أشهر أنواع 
الخطوط التي أوصت دراسات التصميم في استخدامها خط ا۵أ٣۸‏ حجم 14 للعناوين» أو خط Verdana‏ 
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رابعاً: المحتويات الرسومية :Graphical Content‏ 





وهي أيضاً من العناصر المهمة على الصفحة الرئيسية» وتشمل الصور والرسوميات؛ وتساعد المستخدم» 
مع المحتوى النصيء في فهم المحتوى المعلوماتي إضافة إلى إثارة اهتمامه وجذب انتباهه. 
وهناك نوعان من الرسوميات: 

٠‏ الشعاعية المتمثلة في الخطوط والأشكال. 

» والنقطية المتمثلة في الرسوم النقطية المؤلفة من مئات البيكسلات. 


أما الصور فقد تم التعرض لأهميتها وأنواعهاء في الوحدة السابقة. 


خامساً: تخطيط الصفحة :Layout System‏ 
ويهدف وضع مخطط للصفحة إلى تنظيم عناصرها 
بحيث يستطيع المستخدم فهم محتوياتها والتجول 
بيسر وسهولة للوصول إلى المعلومات المطلوبة» 
ومن المخططات الشائعة الاستخدام: 
- الشعار أعلى الصفحة يليه أدوات الإبحار. 
- القائمة الرئيسية في الجزء العلوي الأيمن من 
الصفحة في المواقع العربية» والعكس في 
المواقع الأجنبية. 
- المحتوى المعلوماتي في منتصف الصفحة 


الرئيسية. 


o 
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سادساً: الألوان 601015©: 


وهي من العناصر التي تؤثر في تشكيل الانطباع 
عن الصفحة الرئيسية والموقع عموماء لذلك يحتاج 
المصمم إلى معرفة دلالات الألوان وتأثيراتها 
النفسية والسلوكية على المستخدمين والقواعد العامة 
المستخدمة في اختيار الألوان» والمتمثلة في: 





اخثيار الألوان البيضداء أو Sila pall ld‏ اللونية المخخفضة من الألوان: الأخرى للكلفيات والأرضيات: 
« واختيار عدد محدود من الألوان أو الدرجات اللونية للنصوص والعناوين والعناصر الأخرى في 
الصفحة» واستخدام الألوان المعبرة عن المضمون والمحتوى المعلوماتي الذي يقدمه الموقع. 


سابعاً: الوسائط المتعددة :Multimedia‏ 

تتمثل الوسائط المتعددة في مجموعة وسائل: الصوت والفيديو» والصور المتحركة والرسوميات والنصوص 
المكتوبة التي تم تجميعها ومعالجتها بصورة رقمية» وتقديمُها في حزمة واحدة على مواقع الإنترنتء 
ويضفي استخدامها على الموقع عموماً وعلى الصفحة الرئيسية بالتحديد الإثارة والديناميكية» ويزيد من 
قدرة المستخدمين على فهم واستيعاب المحتوى المعلوماتي النصي المقدم ولاسيما أن استخدامها لم يعد 
بالأمر الصعب أو المعقد: 
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ote Jaa!‏ مس ل 


الصور المتحركة: ويشترك في إنشائها العديد من coo ٠‏ 
البرامج التي سبق ذكرهاء ويتم ذلك من خلال خلق = 
lad‏ من yal‏ والرستوميات. .والإطارانت» 
وعرضها بشكل سريع لتعطي الانطباع بأنها 





الإعلانات المتحركة وغيرها من المحتويات التي تحتاج إلى إضفاء نوع من الحركة والديناميكية عليهاء 


والتي بالمقابل سيضفي وجودها على الصفحة حركة وايقاعاً سريعاً. 


مقاطع الفيديو: وتتمثل في مقاطع الفيديو التي تم م 
التقاطهاء ومعالجتها وتخزيثها وعرضها بصورة | ا 
رقمية من خلال مجموعة من البرامج التي تم 


التعرض لها سابقاًء ويتم تبادل وعرض العديد 





من الأفلام ومقاطع الفيديو عبر الإنترنت» إما مباشرة باستخدام خطوط الإنترنت الفائقة السرعة أو من 
خلال تحميلها على جهاز الكمبيوتر ثم مشاهدتهاء لكن المصممين يعمدون إلى اختيار مقاطع الفيديو 
ذات الأحجام الصغيرة حتى لا تبطئ من سرعة تحميل صفحة الويب» ويعمدون أيضاً إلى ضغطها 





لسهولة وسرعة تحميلها. 
مقاطع الصوت: ويؤثر استخدام الأصوات في HIRAM COI SU pins z ae een TE‏ 


الموقع الإلكتروني» إضافة إلى إضفاء الواقعية 
والإحساس بالحركة وزيادة فهم المحتوى النصيء 
ويُستخدم في الصفحة الرئيسية العديد من المؤثرات 
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الصوتية والموسيقاء والأصوات الحقيقية المنفردة أحياناًء والتي ترافق مقاطع الفيديو أحياناً أخرى» وذلك 
باستخدام العديد من البرمجيات التي تساعد في إنتاج الصوت الرقمي ومعالجته وتخزينه» ثم تقديمه على 
الصفحة. 


النقل المهاس: .وهو .عملية تقل الوسائظ المتعددة؛ 56 


هوه 


اا لكر عر ات این ا ن کا hd SG‏ 
Mh SE 101 i‏ 
0 









عرضها عبر مخدم الإنترنت دون الحاجة إلى 
تحميليا» ويشمل أيطيا عملية تقل الأحداث 


ORAM.) Aci tte =‏ 
السياسية أو الفنية» أو الرياضية الفورية والمباشرة» ويتمتع المستخدم بالقدرة على التحكم بها من خلال 
تشغيلها أو إيقافها أو الانتقال إلى قناة أخرى» ومن ميزات هذا النقل: الفورية وبدل انتظار التحميل» 
وسهولة التعامل معهاء واستقبال أكثر من بث في وقت واحدء ويتوفر لدى المستخدم وعلى الإنترنت 
العديد من البرامج التي تساعد على استقبال هذا Real , Windows Media Player : Jie Cull‏ 


-Quick Time , Player 


العناصر التفاعلية: وتشمل مجموعة الأدوات 
التفاعلية التي يقدمها الموقع وتشكل قنوات اتصال ‏ 5 ws‏ 
وتفاعل بين الموقع والمستخدمء كالتعليق على ي - 





٠ ‘‏ 
المعلومات والآخبار» وطرح الاستفتاءات» وتوفير اعد g s EJ =e‏ 
Eae 1‏ - 8 - 52 
خاصية البحث في الاأرشيف» وغيرها من الخدمات و س = ' 
=o 5 i‏ 

التي قد تمتد إلى مشاركة الافراد في إنتاج == Ca Laia‏ 





المحتوى المعلوماتي أو حتى المشاركة في تصميم الصفحات حسب اهتماماتهم وتفضيلاتهم» وهذه 
الأدوات يجب أن تكون واضحة في الصفحة الرئيسية» كما في الصفحات الداخلية من دون الحاجة إلى 
البحث عنها. 
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خاتمه: 
يقوم تصميم الصفحة الرئيسية على بناء وترتيب العديد من العناصر البناتية بدءاً بعناصر الإبحار 
والتجول» والمحتويات النصية والرسومية» والعناوين والخطوط والألوان» وعناصر الوسائط المتعددة» 
والعناصر التفاعلية» وغيرها من العناصر التي تجتمع لتشكل الصفحة الرئيسية للموقع» والتي يجب أن 
تحمل هويته وطابعَه» وتعطي الانطباع الأفضل etic‏ وعن محتوياتهء والا فإن المستخدم سيجد على 
الإنترنت العديد من البدائل والخيارات التي ستوفر له ما يريده من معلومات» وعناصر مرئية أخرى تتفق 


ويعتمد المصمم في بنائه وترتيبه لهذه العناصر على هذه الصفحة وعلى الصفحات الداخلية للموقع على 
العديد من القواعد والمبادئ التي اسثمدت من مبادئ التصميم والإخراج المطبوع وقواعدهماء وأمكن 
الاستفادة منها في تصميم المواقع الإلكترونية ولاسيما أن الدراسات أثبتت أهميتها ودورّها في نجاح 
اسه لرا رة وات اليه ون هد الاي اة كران Ase, Gilly‏ 


وغيزُها من الأسسء وهو ما سيتم التعرض له في الوحدة التالية. 
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a 


الخلاصه 


لا يختلف تصميم الصفحة الرئيسية للموقع الإلكتروني عن عملية تصميم الموقع ككل من حيث كوثه 
عملية ترتيب العناصر البنائية للصفحة بصورة منسجمة ومتناغمة» بحيث تدعم هذه العناصر بعضها 
بعضاً مع مراعاة أن لكل عنصر منها وظيفته التي يؤديها داخل هذا التصميم» لكنه يختلف من حيث 
توظيف العناصر البنائية لهذه الصفحة بشكل أكثر تفاعلية وديناميكية وإثارةً لاهتمام وانتباه المستخدم. 
فواجهة الموقع وصفحته الرئيسية هي كغلاف المجلة الذي يحمل صورتها ويعبر عن محتوياتهاء وبالتالي 
يجب أن تسخّر كل الإمكانيات التقنية والمؤثرات الفنية» كما يجب أن توظف كل العناصر البنائية بشكل 


مؤثر لتعطي هذا الموقع أفضليته بين المواقع الأخرى. 


وتتعدد العناصر البنائية المستخدمة في تصميم الصفحة الرئيسية للموقع الإلكتروني» وأهمها عناصر 
التجول والإبحارء والتي تضم مجموعة من الروابط التشعبية والأزرار»ء والصور والخرائط» والقوائم 
والعناصر الأخرى التي يضعها المصمم بشكل واضح وسهل الاستخدام للمستخدم الذي يريد أن يعرف 
أين هوء وإلى أين ينتقل» وكذلك المحتوى النصي من معلومات وموضوعاتء والمحتوى الرسومي من 
صور ورسوميات» وعناصر الوسائط المتعددة من صور متحركة ومقاطع صوتية ومقاطع فيديوء 
والعناصر التفاعلية من تعليقات واستفتاءات» وإجراءات للبحث في الموقع والأرشيف» وغيرها من 


cgala 
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اختر الإجابة الصحيحة: 
1. من أهم عناصر الصفحة الرئيسية» والتي من ضمنها: التعليق على الموضوعات والاستفتاءات: 
A‏ العناصر التفاعلية. 
8. الوسائط المتعددة. 


0. المحتوى النصي. 


الإجابة الصحيحة: 8 العناصر التفاعلية 


2. من أماكن وضع أدوات الإبحار والتجول على الصفحة الرئيسية: 
8. الجزء العلوي والسفلي فقط. 
8. الجزء العلوي» والجزء العلوي الأيمن فقط. 
6. كل أجزاء الصفحة تقريباً. 


الإجابة الصحيحة: © كل أجزاء الصفحة تقريباً 
3. يشتمل على الأصوات والفيديو والنصوصء ومن العناصر البنائية المهمة: 
A‏ العناصر التفاعلية. 
8. المحتوى النصي. 


6 الوسافط النتعمدة: 


الإجابة الصحيحة: © الوسائط المتعددة 
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الوحدة التعليمية السابعة 


مبادئ تصميم صفحة الويب 


- مقدمة. 


= مبادئ تصميم صفحة الويب: 


التوازن. 
ه الوحدة. 
ه الحركة. 
o‏ التباين. 
© المحاذاة. 
© التناسب. 
٠‏ الإيقاع. 
خاتمة. 
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العناصر: 


الأهداف التعليمية 
بعد دراسة هذه الوحدة التعليمية يجب أن يكون الطالب قادراً على أن: 


1- يحدد مبادئ تصميم صفحة الويب 
2- يشرح مبدأ التوازن 

Ee‏ يشرح مبدأ الوحدة 

4- يشرح مبدأ الحركة 

5- يشرح مبدأ التباين 

6- يشرح مبدأ المحاذاة 


8- يشرح مبدأ الإيقاع 


الكلمات المفتاحية: مبادئ التصميم - التوازن - التوازن التماثلي - التماثل اللاتمائلي - التوازن 
الإشعاعي - التوازن الرأسي - التوازن الأفقي - التوازن الرأسي الأفقي - الوازن المتقارب - الوحدة - 
التشابه - التقارب - التكرار - وحدة الموضوع - وحدة الصفحة - اللون - الخط - الحجم - الحركة - 
أدوات الإبحار - العناصر البنائية - الاتجاه - المعدل - النوع - التباين - تباين الأحجام - تباين 
الألوان - تباين القيم - تباين الأشكال - المحاذاة - المحاذاة الأفقية - المحاذاة الرأسية - التناسب - 


الإيقاع. 
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أولاً: مقدمة 


يتعامل مصمم المواقع الإلكترونية مع عناصر 
الققسميم النعقدة للقكل المزقي Westad‏ 
مجموعة مترابطة من العناصر التي تؤدي من 
خلال تنظيمها وترتيبها إلى زيادة فعالية وتأثير 
محتوى هذا الموقع» ويعتمد بناء الترابط على 





مجموعة من: المبادعة واس الى فضت بها مائ التصميم Salta‏ بالتأقيرات: السيكولوجية: التاجمة 


اتفق مصممو ومطورو المواقع الإلكترونية بالاعتماد على مبادئ إخراج الصحف الورقية على أن هناك 
أربعة مبادئ أساسية للتصميم الإلكتروني تتمثل في: 

« التوازن. 

0 الوحدة. 

o‏ التباين. 

٠‏ الإيقاع. 
غير أن هناك مبادئ أخرى ذكرها المصممون مثل: 

« الاتجاه والتكرار. 

©« النسبة والتناغم. 

« التدرج والحركة. 


ه. الننيظرة والمحاذاة Aiai‏ 
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ورأوا أنها لا تقل أهميةً عن المبادئ الأربعة الأساسية لكنها قد تتداخل وتتشابه أهدافهاء كما يمكن أن 
يتحقق أحد المبادئ عند تطبيق مبدأ آخرء فمبدأ الوحدة والإيقاع يتحققان من خلال تكرار بعض عناصر 
التصميم على الصفحة مثلآء كما أن مبدأ الاتجاه ينتمي إلى مبدأ الحركة» كما ينتمي إلى مبدأ المحاذاة: 
أما مبدآ السيطرة والتناغم فإنهما مبدآن مكملان للمبادئ السابقة» وعليه يمكن تحديد مبادئ التصميم 
بسبعة مبادئ أساسية: التوازن والوحدة» والتباين والحركة والإيقاع» والتناسب والمحاذاة» وهو ما ستتعرض 
له هذه الوحدة. 


ثانياً: مبادئ التصميم 


يؤكد الباحثون أن تطبيق المبادئ الأساسية 
للتصميم يحكمها العديد من المعايير والضوابط 
منها: 





— يمكن تطبيق ميدأين معاً أو أكثر من ميادئة 
التصميم في العمل الفني: فيمكن على E‏ 
سبيل المثال تحقيق التباين مع التوازن» blema‏ 


Lore ve Ak امم‎ = 
YT" f | 
| = =a 
سے‎ — 


Welcexe fo the Old Pak Horse 


ويمكن أيضاً تحقيق التكرار مع التوازن» ويمكن تحقيق التناغم مع كل من التباين والنسبة والتدرج 
والحركة. 

















- بعض المبادئ تتحقق على نطاق واسع في الصفحة مثل: التوازن والوحدة» وبعض المبادئ تتحقق 
على نطاق ضيق مثل التباين الذي قد يكون بين عنصرين قريبين. 
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ويكمن الهدف الأساسي من عرض هذه المبادئ» ليس فقط في التعرف على هذه المبادئ» وإنما التعرف 
على آلية تطبيقها في تصميم الصحف الإلكترونيةء وهي المواقع الأكثر أهمية لشرائح كثيرة من أفراد 
المجتمع عامةء وللدارسين في مجال الإعلام خاصة»ء وأول وأهم هذه المبادئ مبدأ التوازن. 


أولاً: التوازن ©821306©6: 


وهو ليس مجرد الإحساس بتوازنِ وتساوي عناصر 
التصميم» لكنه عملياً عدم إثقال جزء من الصفحة 
أو أكثر بالعناصر البنائية من صور وألوان 


وخطوط وأشكال» وخلو جزء أو أكثر من هذه 





العناصر أو يكاد أي إعطاء مساحات الصفحة المختلفة الثقل أو القوة نفسيهما. 
ويتحقق التوازن من خلال ثلاثة أشكال هي التوازن التماثلي والتوازن اللاتماثلي والتوازن الإشعاعي: 


:Formal Balance أو التوازن الشكذي‎ Symmetrical Balance „ġuil oji -i 
ويُقصد بهذا النوع من التوازن تقسيم الصفحة إلى أجزاء متساوية (أنصاف وأرباع أو أثمان)»‎ 
وتكرار الأشكال نفسها بالحجم والوضع نفسيهما في نصفي الصفحة» ويُستخدم هذا النوع من‎ 
التمائل لإعطاء الإحساس بالاستقرار والهدوء لدى المستخدم» ويمكن تحقيقه في ثلاثة أشكال‎ 
: هي‎ 

- التماثل الرأسي :Vertical Symmetry‏ ويتم فيه تقسيم الصفحة أو أحد أجزائها إلى نصفين 
جزءٍ أيمن وآخر أيسرء وهذا لا يعني أن الصفحة تنقسم إلى عمودين فقط بل يمكن أن ثقسم إلى 
ثلاثة أعمدة أو أربعة» ويتم الفصل بينها بواسطة الهوامش أو المساحات البيضاءء ويفضل عدم 
استخدام الخطوط كفواصل حتى لا تعطي الإحساس بالرتابة والجمود. 

- التمائل الأفقي aul 4.4, :Horizontal Symmetry‏ الصفحة أو أحد أجزائها إلى نصفين 
أحدهما في القسم العلوي من الصفحة» والآخر في القسم السفلي» ويساعد هذا التصميم في إراحة 
عين المستخدم» وتحقيق الوحدة بين عناصر كل قسم» ويعيبه قلة الموضوعات التي يمكن وضعها 


146 


المبدأ على الصفحات الداخلية؛ لأن المستخدم يدخلها بقصد البحث عن موضوعات محددة. 


t Cc www.syrianow.sy % 











الصقخة الرئيسية | من تحن | اتصل ينا | أضف للمفضلة ص و4 | ial‏ 





[|] 002206 


www.syrianow.sy 





الرئيس الأسد للقناة الثانية في التلفزيون الهولندي: أغلب السوريين يؤيدون حكومتهم آخر تحديث 18/12/2015 - 12:25 ص 
اليوم بصرف النظرعن انتمائهم السياسي ويؤيدون وحدة سورية ...المزيد 


كل سوريّة في موقع وَاحد 
WWW.SHAMRA.SY‏ 


e ) (E) 


RSS 





3017-capture-msn-...jpg 7 & Show all downloads. X‏ كا 


- التمائل الأفقي الرأسي: يتم في هذا النوع تقسيم الصفحة أربعة أقسام متساوية وتوزيع العناصر 
على هذه الأجزاء بشكل متساو cliai‏ ويستوعب هذا التصميم ish ile gua ga‏ وفيه يتعامل 
المستخدم مع كل جزء على أنه صفحة منفصلة. 


:Approximate Symmetry التوازن التقريبي‎ 


يمكن تحقيق نوع من التوازن التمائلي يُدعى التوازن التقريبي aà; Approximate Symmetry‏ 
تكون أجزاء الصفحة متساوية تقريباً» وتكون الأشكال مرتبة حول خط الارتكاز في الصفحة. 
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:Asymmetrical Balance ب-التوازن اللاتمائني‎ 














ارتفاع مؤشر بورصة دمشق ag eine i‏ 
والتداولات بحدود 6 ملايين ليرة ut‏ اا 
مااع SEE‏ 
Show all downloads. x‏ © د م © 
توازن غير متماثل 





وينتج هذا التوازن عن طريق تقسيم الصفحة إلى أجزاء غير متساوية» وذلك من خلال وضع صورة 
كبيرة مع مجموعة من الصور الصغيرة» ويفيد التوازن اللاتمائلي المصممَ في ترتيب عناصر الصفحة» 
كما يمكن من خلاله خلق الإحساس بالحركة والتوتر والفرح والإثارة والغضبء ويسمى هذا النوع من 
التمائل بالتوازن الديناميكي النشط الذي يسمح باستخدام عناصر مختلفة الألوان والأحجام في مكان 
cans‏ مما يعطي للمستخدم حرية الاختيار وإحساساً أكبر بالجاذبية» كما يطلق عليه المصممون التوازنَ 
الشكلي بالكتل» وفيه يكون للأشياء أو الأجسام المختلفة الوزن البصري نفسه؛ أو جاذبية العين نفسها 
بغض النظر عن التساوي في الأشكال. 


ج- التوازن الإشعاعي :Radial Balance‏ 


وفي هذا النوع من التوازن هناك نقطة مركزية هي 

بمثابة نواة الإشعاع التي تأخذها العناصر البنائية canina | uaman‏ | صت مده AL‏ 
نقطة انطلاق تدور حولها من زاوية» ومن زاوية Q -4 oe‏ 
أخرى تعد هذه النقطة بمثابة نقطة جذب لبصر P a PAD‏ 

ا د لق ا عل ك اضر NPP‏ ]2 


~ Giresioging software and وج ويم کد‎ 
1 Contact us 
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الإلكترونات حول النواةء كما أن حركة الاتزان الإشعاعي لا تقتصر على الحركة الدائرية» بل يمكن أن 
تأخذ شكل الحركة اللولبية ا1121م5»: وفي الحركة اللولبية يكون هناك أكثر من نقطة مركزية يدور حولها 
بصر المستخدم» ويجب أن يقترن تطبيق مبداً التوازن مع مبدأ الوحدة لأن العناصر بشكل متمائل مع 


عدم مراعاة الوحدة بينها لا يعطي الإحساس بالتوازن» بل الإحساس بالفوضى. 


ثانياً: الوحدة راا لا: 


تتحقق الوحدة باستخدام الأساليب المختلفة التي 
تجعل عناصر الصفحة تتفاعل مع بعضها لتعطي 
الإحساس بالانسجام والوحدة» فالصور والنصوص 
التي بينها أشياء مشتركة مثل اللون تعطي 
الإحساس بمعنى واحدء ويحظى هذا المبدأ باهتمام 


Alaia aaa e (Gestalt) المدرسة الشكلية‎ 





الويب حيث ترى أن العناصر القريبة من بعضها البعض تؤدي إلى الوحدة» فوضع الصور مجاورة للنص 
أو بالقرب منه تساعد في تفسير الرسالة وفهمها. 


مبادئ تطبيق الوحدة: 
يمكن تطبيق الوحدة من خلال تطبيق العديد من المبادئ مثل: 


- التشابه: إذ يسهل إدراك الأشياء المتشابهة من حيث اللون أو الخط أو الشكل على أنها مجموعة 
واحدة» ويمكن تذكرها وفهمها بشكل أسرع. 
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- التقارب: وهي أبسط طريقة لخلق الإحساس بوحدة مجموعة من العناصر أي وضعها بشكل 
متقارب من بعضهاء واستخدام الهوامش والعناوين القريبة من المتن» وجعلها تدرك على أنها وحدة 
واحدة على الصفحة. 

- التكرار: كتكرار الألوان والأشكال والنصوصء والعناصر الأخرى ليؤكد اتجاه هذه العناصر وادراك 


حركتهاء وليعطي الإحساس بالاستمرارية» والامتداد المرتبطة بالحركة. 


أنواع الوحدة: 


€ x arabic.cnn.com hù = 


” 11 1 07 Rea 
Ce ا‎ e E = a 


F 
بالفيديو: أسبوع مخيف‎ 
يتتهي باعتقال 4 متهمير‎ 
بدعم الإرهاب في أمريكا‎ 






وحدة الموضوع 


تنقسم الوحدة عادة إلى نوعين: 


- وحدة الموضوع: ويقصد به جعل كل موضوع يظهر كأنه متفرد عن بقية الموضوعات» وذلك من 
خلال تمييزه بسمة معينة قد تكون نوع الخط أو الشكل الذي يحتويه كأن يكون شكلاً مربعاً أو 
مستطيلاًء أو لونَ نصوصه»ء أو أن تكون أرضياته مختلفة عن بقية الموضوعات الموجودة على 
الصفحة. 

- وحدة الصفحة: ويُقصد بها تحقيق وحدة الصفحة ككل من خلال خلق وحدة تربط وحدات 


الموضوعات الفرعية بعضها ببعض › ولا تتعارض وحدة الموضوع مع وحدة الصفحة بل توكدهاء 
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ويمكن أن تكون هناك وحدة عامة تربط بين وحدات الموضوعات مثل حجم الخط أو نوعه» وفي 


الوقت نفسه يمكن أن تكون هناك وحدة الموضوع من خلال تمييزه بلون معين. 


العناصر البنائية في تحقيق الوحدة: 
ويمكن الاعتماد على العديد من العناصر البنائية في تحقيق الوحدة عبر الصفحةء منها: 


-اللون: يستطيع اللون أن يخلق وحدة بصرية 
ن اوضر غات امكف ,ذلك من خا 
تكرار أحد الألوان أو بعض درجاتها عبر 
الصفحة» كما يمكن أن يساهم في تحقيق وحدة 
الموضوع عن طريق استخدام درجات لونية 
متقاربة في المتن والعنوان الرئيسي والفرعي ils‏ 


ERD os be at a os‏ ي 


درجة لونية إلى أخرى. 


- الخط: يمكن أن يحقق الوحدة بين عناصر 
الموضوع الواحد والموضوعات المختلفةء 
فيمكن أن يحقق الوحدة بين الموضوع عن 
طريق استخدام عائلة الحرف نفسها في 
وبالطريقة ذاتها يمكن أن يحقق الوحدة بين 
الموضوعات المختلفة عن طريق تثبيت 
إحدى عائلات الحروف في المتون أو 
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- الحجم: يقصد بالحجم هنا Cult‏ بعض 
أحجام الصور على الصفحة» وتثبيت بعض 
أحجام الحروف» وتثبيت بعض أطوال 
الأعمدة على الصفحة» وتقديم مساحات 


منقاربة لبعض الموضوعات. 







- الشكل: يُقصد به تقديم شكل متمائل سواء 
أكان ذلك للصور أم النصوص أم الأعمدة 
فيمكن أن نقدم الصور بشكل مربع أو مستطيل 
أو دائري أو شبه دائري» كما يمكن أن تُقدم 
النصوص بشكل واحد كأن تكون بخط 8010 
أو مائل Italic‏ 


Movement 4s at) : ts 


يُقصد بالحركة الطريقة التي تتحرك بها عين المشاهد حول عناصر التصميم المرئي وخلالهاء ولكي 
يتمكن المصمم من تحريك عين المستخدم خلال صفحة الويب» عليه مراعاة الاعتبارات التالية: 


- وضوح أدوات الإبحار المتمثلة في الروابط. 
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تنظيم العناصر البنائية على الصفحة بحيث لا تتحرك Que‏ المستخدم حركة عشوائية» إذ يمكن 
وضع العناوين Ys]‏ ثم الصورة تليهما الروابط. 
ترتيب العناصر المتشابهة بطريقة متدرجة» فالتدرج يضيف الحركة إلى الأشكال» فالتدرج من 
اللون المظلم إلى المضيء» مثلاً يوجه حركة العين عبر الشكل. 
ترتيب الأحجام من الأكبر إلى الأصغر أو العكس» فمن غير المقبول تحرك العين بين أحجام 
مختلفة الكبر والصغر لأن ذلك ينافي مبدأ إبصار العين؛ ففي حالة الأحجام الكبيرة تكون حدقة 
العين على أقوى اتساع لهاء أما في حالة الأحجام الصغيرة فإن حدقة العين تكون ضيقة جداًء 
ووضع شكل صغير بين حجمين كبيرين يجعل حدقة العين تصغر بصورة قسرية مما يصيبها 
بالإجهاد» والعكس صحيح أيضاًء فإن وضع شكل كبير بين شكلين صغيرين يجبر حدقة العين 
على أن تتسع بشكل مفاجئ مما يصيبها بالإجهاد أيضاً. 
إضافة بعض المؤثرات التي تقوم بدور محوري في توجيه حركة العين مثل: 

o‏ الخطوط المائلة التي تؤدي إلى إيهام المستخدم بأن هناك حركة في التصميم. 

ه التغيير في الاتجاه أو التغيير بين الضوء والظلام يوهم المستخدم بأن هناك حركة في 


e x www.almayadeen.net 


الجيش السوري يتحضر لعملية عكسية باتجاه مهين 


المحتوى تسمى 
asjad‏ | تر ددات القناة ك 
الموضوعية e‏ 


XO z 
SSD VPS Hosting 
768MB RAM - 1 CPU - 
15GB SSD - $5 1-click 
install Drupal, WP, LEMP 





-—- ne 1A7 i 
تركيا: أ ذ‎ 1 : | 


| شاهد كاما النة 
الحركة في التصميم 
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خصائص الحركة في التصميم هي: 
الاتجاه: 
إذ يأخذ اتجاه حركة العين على الصفحة أحد ثلاثة أشكال: 
o‏ من اليمين إلى اليسار أو العكس ويظهر هذا النوع عادة في القراءة. 
© من أعلى إلى أسفل أو العكس وتظهر هذه الحركة عادةً مع ترتيب مجموعة من الصور بطريقة 
رأسية على الصفحة. 
٠‏ ومن الأمام إلى الخلف أو العكس وتحدث هذه الحركة عادةً في الرسوم ثلاثية الأبعاد لتساعد 
العين على إدراك العمق أو البعد الثالث. 
المعدل: 
يُقصد بمعدل الحركة سرعة أو بطء حركة العين في إدراكها للأشكال» ويُقسم هذا النوع إلى ثلاثة أنواع: 
٠‏ حركة سريعة: تحدث هذه الحركة عند الانتقال من صورة إلى أخرى أو من عنوان موضوع إلى 
عنوان موضوع آخر. 
٠‏ وحركة متوسطة: تحدث عند الانتقال من سطر إلى آخر أو من عمود إلى آخر. 
o‏ وحركة بطيئة: تحدث عند الانتقال من حرف إلى آخر ومن كلمة إلى أخرى أو من أحد 
تفصيلات الصورة إلى غيرها من التفصيلات بالصورة نفسها. 
النوع: 
يُقصد بنوع الحركة الطريقة التي تسلكها العين في إدراكها للأشكال المصفوفة على الصفحة» وتأخذ هذه 


الأشكال: 
o‏ حركة طولية: تحدث عند تحريك العين لقراءة سطر معين مكتوب بطريقة أفقية. 
٠‏ حركة بندولية: تتأرجح من اليمين إلى اليسار ثم العكسء مثلما يحدث في الانتقال من موضوع 


إلى آخرء أو من صورة إلى أخرىء أو من عنوان إلى عنوان» أو من سطر إلى سطر. 

ف ay‏ ار كفت عله برطم يض elit‏ اة اف التے شهدم کاب يصرى مكل 
الصور والعناوين بشكل دائري على أطراف الصفحة» فتقوم العين بالمرور على هذه الصور 
بشكل دائري. 
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رابعاً: التباين Contrast‏ 


ويُعرّف التباين بأنه التبادلية ow Alternatively‏ 
اضر ااي ال کل اا ن 
nady daly kapd ey Get‏ 
والبرودة» والكبر والصغرء كما يعرّف بأنه تجنب 
وجود العناصر المتشابهة في الحجم واللون 
والمساحة مجاورةً لبعضها البعض. 





يساعد التباين في: 
© تسهيل القراءة. 
٠‏ إبراز مواد الصفحة» واضفاء الجاذبية عليها. 
« تنسيق المعلومات في الصفحة. 
فالتباين بين العناوين والمقدمات والعناوين الفرعية والنصوص يساعد عين القارئ في انسيابية الرؤية 
موضحاً المسالك التي يمكن أن تتوجه إليها العين عبر النص. 
أشكال التباين: 
يأخذ التباين مجموعة من الأشكال منها: 
- التباين بين الشكل والأرضية: يؤكد المصممون أن للأرضية هيئة سالبةء وللشكل هيئة موجبةء 
ويقوم التباين بينهما بشكل توفيقي ليجعل منهما شيئاً واحداً تدركه العين. 
- التباين بين الأحجام: ويحدث عن طريق تباين العناصر من النوع نفسه مثل: تباين الصور 
الصغيرة والكبيرة» وتباين الحروف الكبيرة والصغيرة» والتباين بين المساحات الكبيرة والصغيرة. 
- التباين بين القيم: هو التباين النسبي بين الإضاءة والإظلام. 
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- تباين الألوان: يتدرج التباين بين الألوان بدءاً من التباين الكامل بين الألوان المتقابلة في عجلة 
الألوان» والتباين المتوسط بين الألوان المتساوية المسافة على العجلة اللونية» والتباين الضعيف 
بين الألوان التماثلية» وهي الألوان التي لها أساس مشترك. 
لكل نوع من التباينات اللونية الثلاثة التأثيرات السيكولوجية التي يؤديها داخل الصحيفة: 
- التباين التام يؤدي إلى الاضطراب وعدم الاتزان. 
- التباين المتوسط يؤدي إلى التنافس بين الألوان في جذب الانتباه. 
- التباين الضعيف يؤدي إلى الشعور بالوحدة بين عناصر التصميم. 
- تباين الأشكال: يتحقق تباين الأشكال من خلال طريقتين: الأولى عن طريق استخدام الاتجاه 
مثل: الاتجاهات الأفقية والرأسية» الثانية: Gob ge‏ استخدام الأشكال الهندسية مثل: 
المستطيلات والمربعات والدوائر والأشكال الخماسية والسداسيةء والأشكال المنتظمة وشبه 
المنتظمة والمنحرفة» والأشكال المائلة والمستقيمة. 


:Alignment 5)alal) خامساً:‎ 


يشير مصطلح المحاذاة إلى الطريقة التي تصطف بها عناصر التصميم خلال الصفحة لتحقيق الوحدة 
البصرية» وتنقسم المحاذاة إلى نوعين هما: 
- المحاذاة الأفقية :Horizontal Alignment‏ 
تشمل محاذاة النصوص ناحية اليمين أو اليسار أو الوسط أو الضبط: 
٠‏ يعيب المحاذاة ناحية اليمين أو اليسار في اللغة الإنجليزية والعربية عدم ضبط 
نهايات الحروف» بيد أنها تتميز بعدم ترك مسافات بيضاء زائدة بين الكلمات. 
٠‏ يعيب محاذاة الوسط عدم ضبط بدايات ونهايات كل سطر على الجانبين ويميزه ترك 
مسافات بيضاء. 
o‏ يعيب محاذاة الضبط توسيع المسافات البيضاء بين الحروف ويميزه ضبط بدايات 
الحروف ونهاياتها. 
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تشمل المحاذاة الأفقية علاوةً على محاذاة النصوص محذاة الأشكال المرئية من صور 
ورسوم» وفي هذا تطبيق لمبدأ الحركة مرة أخرى. 
- المحاذاة الرأسية le :Vertical Alignment‏ غرار ضبط النصوص والأشكال المرئية 


بالاتجاه الأفقي تلجأ الصحف أيضاً إلى الاتجاه الرأسي في تقديم بعض أشكالها المرئية. 


سادساً: التناسب :Proportion‏ 


يشير التناسب في تصميم صفحة الويب إلى علاقة بين ثلاثة عناصر أو أكثر كالعلاقة بين الحجم 
والمساحة والكم» كما يشير التناسب إلى الأحجام من زاوية» ووزن العناصر المتنوعة في التصميم من 


زاوية أخرىء ويأخذ التناسب في الصفحة عادة أشكالاً عدة منها: 


- التناسب في حجم حروف النصوص: Lai‏ 
قاعدة لتناسب النصوص وهي زيادة حجم 
العناوين عن المقدمات بمقدار نقطتين» 
وزيادة المقدمات بمقدار نقطتين عن حجم 
المتن» لتحقيق انسيابية الرؤية 


- التناسب في حجم الأعمدة: يُقصد به 
تناسب الأعمدة الكبيرة مع الصغيرة 
وتناسب المواد التي تحتوي eagle‏ فلا 
يجوز على سبيل المثال أن يكون هناك 
عمود مكتظ بالنصوص والصور وآخر 


فارغ. 





157 


- التناسب في مساحة الصور: يجب 
أن تتناسب أحجام الصور مع 
بعضها البعض من زاوية» ومع 
الموضوع الذي تعرض له من زاوية 


أخرى» فلا يصح أن تكون هناك 





و 
يق e ai Lp clan‏ 
صغير وا صحيح اب 
r O a‏ 





:Rhythm ¢ lay) سابعاً:‎ 


يُعرّف الإيقاع بأنه تكرار عناصر التصميم مثل 
الخطوط والأشكال والألوان والفراغات لكي تعطي 
التصميمٌ الحيوية» ويستخدم المصمم هذا النوع 
عندما يريد أن ينتقل القارئ من عنصر إلى آخر 
على الصفحة» وقد استعار فن الإخراج الصحفي 
هذا المبدا مقه مثل gaill ala‏ البصضرية من 


الفنون الموسيقيةء وهناك شبه تقارب بين مبدأي 





الوحدة والإيقاع يتمثل في تكرار بعض عناصر التصميم على الصفحةء لكن بشكل متوالٍ على عكس 
الوحدة» ويمكن تحقيق الإيقاع في التصميم عادةً بمحاذاة الصور الأفقية والرأسيةء فالإيقاع يتحقق عادةً 
في الصور المتسلسلة متماثلة المساحة والشكل واللون. 
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خاتمه: 
استطاع مصممو ومطورو المواقع الإلكترونية من خلال وضع العديد من التصميمات الإخراجية 
لصفحات الويب» واستناداً إلى المبادئ التي يستخدمها مصممو الصحف الورقية واستناداً أيضاً على 
العديد من الأسس الفنية والتقنية والنفسية للتأثير على المستخدم استطاعوا التوصل إلى مجموعة من 
المبادئ الرئيسية التي يمكن الاعتماد عليها للوصول إلى تصميم جذاب وفعال وسهل الاستخدام» كالوحدة 


والتوازن» والتباين والحركةء والمحاذاة والإيقاع» وغيرها من المبادئ. 


وأشار هؤلاء المصممون إلى تداخل وتشابه هذه المبادئ في العديد من الأسس والطرائق التي تتبعهاء كما 
أشاروا إلى ضرورة تحقيقها وتطبيقها أحياناً بالتصميم نفسه حتى يمكنَ الاستفادة القصوى من ميزات 
كل Jase‏ 


وكان الهدف من عرض هذه المبادئ ليس فقط التعرفت على مزايا وعيوب تطبيق أسس ومبادئ تنظيم 
العناصر البنائية لصفحة الويب على اختلاف أشكال هذه العناصر وأنواعهاء وإنما الاستفادة من آلية 
تطبيقها في تصميم الصحف الإلكترونية» والتي تشمل جميع المواقع الإخبارية (السياسية وغير السياسية)» 
والتي لها أصل ورقي مطبوع أو ليس لهاء والتابعة لمؤسسات حكومية أو هيئات ومؤسسات خاصةء 
وغيرّها من المواقع التي تشابه الصحف المطبوعة في نشر المعلومات والأخبار والأحداث بشكل دوري 
وتحديث دائم» وهو ما يهم النسبة الأكبر من متصفحي مواقع الإنترنت والدارسين والباحثين في مجال 
الإعلام والاتصال» وهو ما سيتم التعرض له في الوحدة التالية والمتعلقة بتصميم الصحف الإلكترونية؛ 
والعناصر التيبوغرافية والغرافيكية والتكنولوجية المكوّنة للبناء التصميمي لهذه الوسائل. 
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الخلاصة 
يعتمد تصميم صفحة الويب وتصميم الموقع الإلكتروني وترتيب العناصر البنائية لهذه الصفحة على 
مجموعة من الأسس والمبادئ التي تساعد على توظيف هذه العناصر بشكل يحقق الجاذبية والتصفح 


وتتحدد مبادئ التصميم الإلكتروني في أربعة مبادئ أساسية: التوازن والوحدة» والتباين والإيقاع» وقد 
أضاف إليها المصممون مجموعة من المبادئ كالاتجاه والتكرارء والنسبة والتناغم» والتدرج والحركةء 
والسيطرة والمحاذاةء والتقارب» لكنهم ونظراً لتتداخل وتشابه العديد من هذه المبادئ وجدوا أنه من المناسب 
تحديدها في سبعة مبادئ أساسية هي: التوازن والوحدة» والتباين والحركة» والإيقاع والتناسب والمحاذاة 
وتراعي هذه المبادئ الأسس الفنية التي تسعى وراء تقديم صفحة ويب جذابة ومثيرة الاهتمام» كما تراعي 
الأسس التقنية للوسيلة التي يتم من خلالها عرض هذه الصفحة وهي الإنترنت» ففيها العديد من 
الإمكانيات التي يمكن تسخيرها وتوظيفها بالاعتماد على هذه المبادئ في خلق تصميم فعال» ولا يمكن 
تناسي الأسس النفسية التي يمكن من خلالها التأثير على المستخدم لإعطائه الإحساس بأن الموقع الذي 
يتصفحه هو الذي يلبي حاجاته وتفضيلاته من الناحية الشكلية والوظيفية. 
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اختر الإجابة الصحيحة: 


1. من أهم مبادئ تصميم صفحة الويب والذي يعني إعطاء مساحات الصفحة الثقل والوزن 
نفسيهما: 
8. التباين. 
8. التوازن. 
. الوحدة. 
0. التكرار. 


الإجابة الصحيحة: 8 التوازن 


2. من أنواع مبدأ التوازن: 

6. التوازن المتمائل. 
. التوازن اللامتمائل. 
ااا اي 


OE بقن‎ 


m o O DW 
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3. يأخذ التناسب في الصفحة عادةً أشكالاً عدة منها: 
A‏ التناسب في حجم حروف النصوص وفي حجم الأعمدة فقط. 
.B‏ التناسب في حجم حروف النصوص» وفي حجم الأعمدة وفي حجم الصور. 


الإجابة الصحيحة: 5 التناسب في حجم حروف النصوص» وفي حجم dac Y!‏ وفي حجم 
الصور 
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الوحدة التعليمية الثامنة 


تصميم الصحيفة الإلكترونية 


العناصر 7 


% مقدمة. 
*» مفهوم الصحافة الإلكترونية. 
**» خصائص الصحافة الإلكترونية. 
** تصميم الصحف الإلكترونية. 
# أسس الإخراج الصحفي: 

« الأسس الفيزيولوجية. 

٠‏ الأسس الصحفية. 

٠‏ الأسس الفنية. 

٠‏ الأسس النفسية. 


ef‏ خاتمة. 
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الأهداف التعليمية: 
بعد دراسة هذه الوحدة التعليمية يجب أن يكون الطالب قادراً على أن: 


. يحدد مفهوم الصحافة الإلكترونية. 

. يشرح شروط بناء مواقع الصحف. 

. يشرح خصائص الصحافة الإلكترونية. 

. يحدد كيفية تصميم الصحف الإلكترونية. 

. يشرح الأسس الفيزيولوجية للإخراج الصحفي. 
. يشرح الأسس الصحفية للإخراج الصحفي. 

. يشرح الأسس الفنية للإخراج الصحفي. 

. يشرح الأسس النفسية للإخراج الصحفي. 


NY @ a A Q N =‏ من 


الكلمات المفتاحية: 


الصحافة الإلكترونية - شبكة الويب - لغات البرمجة - أدوات التجول - برامج التصفح - الفنون 
الصحفية - عرض الشرائح المصورة - عرض الشرائح مع السرد - القصص المسموعة - التحرير 
الإلكتروني - قالب التصميم - قالب المقاطع - قالب الساعة الرملية - الصحف الإلكترونية الكاملة - 
النسخ الإلكترونية - مواقع مرتبطة بوسائل الإعلام - مواقع إرشادية - مواقع إعلامية قائمة على التعليق 
- مواقع المناقشات - الوسائط المتعددة - النصوص التشعبية - التفاعلية - الآنية - الأرشيف 
الإلكتروني - الإخراج الصحفي - الأسس النفسية - الأسس الصحفية - الأسس الفيزيولوجية - الأسس 
الفنية. 


0 
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أولاً: مقدمة 


تغيرت صورة الوسائل الإعلامية بعد ظهور 

الإنترنت» ولعبت هذه الشبكة في البداية دور NEWS‏ 

الوسيط الاتصالي الذي نقل خدمة الوسائل 

الإعلامية الجماهيرية التقليدية» فظهرت من خلالها 

العديد من مواقع الصحف الورقية المطبوعةء mn‏ ڪڪ 


وتبعها العديد من مواقع المحطات والقنوات التلفزيونية والإذاعية» ويمكن القول في الوقت الحالي إن جميع 
هذه الوسائل لها وجود على الإنترنت» ولم يقتصر الأمر على لعب الوسيط الإعلامي والاتصاليء 
فظهرت العديد من المواقع الإلكترونية التي ليس لها أصل إعلامي واقعي» لتصبح الوسائل الجديدة التي 
تقوم بالوظائف نفسها التي تقدمها الوسائل التقليدية» يضاف إليها وظائف أخرى فرض ظهورّها طبيعة 
الإنترنت والإمكانياث التقنية التي تتمتع بهاء وتحولت هذه الوسائل إلى وسائل تفاعلية غيرت من طبيعة 
الاتصالي الأحادي الاتجاه الذي كان سائداً إلى الاتصال الثنائي الاتجاه» وأعطت للمستخدم حرية وتحكماً 
أكثر في العملية الاتصاليةء وزادت مساحة المشاركة والتبادل» والانتشار والتوصيل» وقد اهتم الباحثون 
بعملية بناء وتصميم هذه الصحف» وركزوا على أهمية تصميمها واخراجها بالشكل الذي يساعد على 
سهولة استخدامها والوصول إلى المعلومات» وهو ما سيتم التعرض له في هذه الوحدة. 


167 


Lili‏ : مفهوم الصحافة الإلكترونية 


تضم الإنترنت الآن كل أنواع التطبيقات الإعلامية الإلكترونية من 
الصحف الإلكترونية (التي لها أصل ورقي والتي ليس لها)» والمواقع 
الإخباريةء والإذاعات عبر الإنترنت» والتلفزيون عبر الإنترنت» 
ووكالات الأنباء عبر الإنترنت» وغيرها من التطبيقات التي يمكن 
اعتبارها شكلاآً من أشكال الصحافة الإلكترونية» لأنها تقوم بتقديم 
الأخبار والمعلومات والأحداث اليومية بشكل دوري يومي» أو خلال 
شاعات أو أحياناً خلال دقائق: 








ويذكر الباحثون أن الصحافة الإلكترونية ظلت حتى العام 2000 قاصرة عن استخدام أساليب وتقنيات 
النشر الإلكتروني على الإنترنت» فكانت مجرد نسخ إلكترونية من المحتوى المعلوماتي للصحف الورقية؛ 
على مستوى المضمونء وكانت مجرد صورة شكلية ۴ا6 من بعض المواد الصحيفة الورقيةء أو شكلاً 
PDF Syaa‏ من النصوص والصور والأشكال والصفحات من الصحيفة الورقية على مستوى الشكل» إلى 


أن ظهرت خدمة الويب» وغيرت الصورة المقدمة للمواقع والصحف الإلكترونية بشكلٍ تام. 


تُعرّف الصحيفة الإلكترونية "بأنها كل إصدار إلكتروني فوري يتم نشره عبر الويب» صُمم باستخدام إحدى 
لغات الترميزء يقوم المستخدم بتصفحه عبر شاشة الحاسب الآلي» باستخدام برامج التصفح» ويستخدم 
هذا tau)‏ كل : الفتون. الصنسقية وقوالب: التحرير . القايدية والمسقطدكة" putas‏ هذا القعريف» coll‏ 


مجموعة المحددات التالية: 


1) الصحيفة الإلكترونية تشمل كل أشكال التطبيقات الإعلامية التي تقدم المضامين الإخبارية» سواء 
منها: 
« المواقع التابعة لوسائل إعلامية تقليدية (صحف ورقية» قنوات تلفزيونية» محطات إذاعيةء 
وكالات أنباء)» والتي تقدم المحتوى المعلوماتي نفسه تقريباً. 
٠‏ المواقع الإخبارية المتنوعة المجالات» والتي ظهرت مباشرة على الإنترنت» وقدمت محتوى 
معلوماتياً مخصصاً للعرض على شبكة الويب» ومستخدماً الأساليب والقوالب الصحفية 
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المستحدثة للتحرير الإلكتروني والتي تميزها عن المواقع الخدمية أو التجارية أو الحكوميةء 
وما شابه ذلك. 

« المواقع التي تحوي كل آليات التجول والإبحار» والأدوات التفاعلية» والأدوات التي تمكّن 
المستخدم ليس فقط من قراءة الأخبارء وانما إضافة المعلومات» وإلغاء الوساطة بينه وبين 


الوسيلة» أي العمل بشعار الويب: اقرأ واكتب .Read & Write Medium‏ 


2- كما يشير هذا التعريف إلى أن هذه الصحف تعتمد البث على شبكة الويب» أي يمكن استبعاد 


كل ما هو خارجهاء كخدمات التليتكست» والصحف التي يتم تخزينها على أقراص مدمجة (61. 


3- يستخدم في ترميز وانشاء هذه الصحف إحدى لغات البرمجة والترميز كلغة ال HTML‏ أو 
× مما يسمح للقارئ استخدامها وتصفحهاء لا مجرد التعرض لها. 

4- تتيح هذه الصحف لمستخدميها التجول عبر صفحاتهاء والوصول إلى محتوياتها باستخدام أدوات 
التجول والإبحار المختلفة» كما تتيح له استخدام التطبيقات التفاعلية التي تمكّنه من التواصل 
المباشرء والاستخدام الفعال مع القائم بالاتصال في هذه الصحيفة. 

5-يتم التصفح باستخدام العديد من برامج التصفح التي تمكّن المستخدم من استعراض الملفات 
النصية» والمحتوى المرئي من هذه الصحيفة. 

6- أهم ما يميز هذه الصحيفة: 

o‏ استخدام الفنون الصحفية التقليدية كالأخبار والتحقيقات والحوارات. 
٠‏ واستخدام الفنون الصحفية المستحدثة مثل: 
ه عرض الشرائح المصورة 510115 ©5106 حول حدث من خلال توظيف الصور 
المتغيرة والعناصر الغرافيكية. 
o‏ عرض الشرائح بمرافقة gill, «Narrated Slideshow 2s)‏ يقدم عرضاً متكاملاً 
للقصص الإخبارية بمرافقة التعليقات المعبرة بما يشبه البرامج الوثائقية أو القصص 
المسموعة 5101165 6100190 لإضافة ples‏ جديدة على القصص الإخبارية. 
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© استخدام الوسائل المتعددة التفاعلية gmba anti! Interactive Multimedia‏ 
معلوماتية واخبارية متضمنة العديد من العناصرء كالصور والتعليقات والنصوص 
والفيديو. 
«Transcripts Ahoy! gal si Gitisl Gaye o‏ كتقديم الحوارات والمقابلات 
الأصلية. 
7-كما يعتمد هذا النوع من الصحافة على قوالب ومدارس مستحدثة في التحرير الإلكتروني» سواء 
في كتابة الأخبار أم إجراء الحوارات والتحقيقات مثل: 
ه قالب التصميم Storyboard‏ الذي يسمح بإدخال الصوت والصورة مع التحقيق 
الصحفي. 
e‏ قالب المقاطع AS pally Ali pla) lesa) Cusly sill Section Technique‏ 
« قالب الساعة الرملية الذي يناسب القصص الإخبارية التي تحوي الكثير من العناصر 
والتطورات المهمة. 
وغيرها من الفنون الصحفية الإلكترونية التي أصبح الاعتماد عليها أمراً ضرورياً يمليه شكل 
العرض المستحدث في هذه الوسائل» وحجم المعلومات المتوافرة فيهاء وحاجة المستخدم إلى 
الحصول على كم أكبر من المعلومات بشكل مختلف ومتطور يتناسب وهذه الوسيلة. 


ثالثاً: أنواع الصحافة الإلكترونية 
يصنف الباحثون الصحف الإلكترونية حسب النوع إلى نوعين رئيسين هما: 


1 -صحف إلكترونية كاملة: تُعرض على الإنترنت» واما أن تكون تابعة لمؤسسات إعلامية أو 
لا. 
2-نسخ إلكترونية: تعرض صوراً أو مواد من بعض محتويات الصحف الورقية الأصلية» أو تقدم 


صورة PDF‏ عن هذه الصحف. 


يصنف الباحثون الصحف الإلكترونية حسب تفاعلها مع المستخدمء ومنها: 


a 
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1 - المواقع المرتبطة بالوسائل الإعلامية: لكنها تضيق من حجم مشاركة الجمهور معها. 

2- المواقع الإرشادية: وهي المواقع التي ترتب وتصنف محتوياتها المعلوماتية» وتوظف محركات 
البحث للوصول إلى مصادر المعلومات» مثل موقع 78100. 

3- المواقع الإعلامية القائمة على التعليق: التي تتيح للمستخدم مناقشة المعلومات 
المعروضة في وسائل الإعلام» ويُّنتج مضمون هذه المواقع صحفيون واعلاميون متخصصون. 
„Freedom Forum ; Media Channel aise Jia‏ 

4- مواقع المناقشات والمشاركات: وهو الاتجاه الذي تتبناه العديد من الصحف الإلكترونيةء 


والتي تسمح لمستخدميها بمشاركة عالية» وتحكم أكبر بالمضمون المقدم. 


رابعاً: خصائص الصحافة الإلكترونية: 

تتميز الصحافة الإلكترونية» كما دلت على ذلك الدراسات والأبحاث بالعديد من السمات والخصائص التي 
تجعلها تختلف اختلافاً كبيراً عن غيرها من الوسائل الإعلامية الورقية وغير الورقية» ومن هذه 
الخصائص: 





1 - تسمح هذه الوسائل بتوظيف كل أشكال المعلومات المعروضة على وسائل الإعلام التقليدية» من 
نص وصوت وصورة وفيديو ورسوميات» من خلال استخدام الوسائط المتعددة «Multimedia‏ 
التي أضافت إلى المحتوى المعلوماتي قدرة أكبر على الجذب والتأثيرء وإن كان الباحثون يوصون 


باستخدامها بقدر معقول ومناسب حتى لا تعيق عملية التصميم. 
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2- كما تستفيد من فكرة استخدام الويب للنصوص التشعبية 56146«4/إ1! التي تُعد نظاماً متصلاآً من 
الوحدات المعلوماتية المنفصلة» والتي تستخدم لربط المستخدم بخلفيات معرفية إضافية» أو 


عا ماف Ah ae‏ ا ات کل کک اب اا 





3- وتوفر هذه الصحافة قدراً كبيراً من التفاعلية 17161/26111011 من خلال زيادة الروابط التشعبية» 
لزيادة خيارات المستخدم للتجول» وتوفير 
الوقت والجهد عليه من خلال التواصل 
والتفاعل والرد على طلبات واستفسارات 
المستخدم» ومن خلال تسهيل الاتصال 
المباشر المتزامن وغير المتزامن مع a‏ 
الصحيفة» ومن خلال تسهيل VA.‏ ظ A‏ 
إضافة المعلومات من قبل المستخدم لرفع درجة المشاركة» أو من خلال وضع نظام للمراقبة 
وإحصاء عدد الزوار للتمكن من الوقوف على حجم الاستخدام» كل ذلك للمساعدة على رفع 
معدلات الاستيعاب والفهم لدى المستخدمين. 





4- الآنية /ا1701760136: وهي من أبرز ميزات الصحيفة الإلكترونية» إذ تعتمد على نشر المعلومات 
والمضامين الإخبارية» فيقوم المحرر بتحديث مادته الإخبارية بكل جديد عندما يطرأء مما Jai‏ 


من خدمة الأخبار العاجلة. 
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5- الأرشيف الإلكتروني: ويشمل كل أشكال المعلومات والصورء والمقاطع الصوتيةء ومقاطع 
الفيديو» وغيرها من المواد التي تتيحها الصحف لمستخدميها بشكل سهل عبر قاعدة بياناتهاء 
والتى اتيم لكر هائل من الموضرجات. 





خامسا: تصميم الصحف الإلكترونية: 

يخلط مخرجو الصحف والأكاديميون بين مصطلحين: تصميم الصحف والإخراج الصحفي. 

ويعرّفون الإخراج الصحفي على أنه مجموعة العمليات الفنية التي تساعد على خروج الصحيفة ونشرهاء 
أو هو عملية توزيع الوحدات التيبوغرافية فوق مساحة الصفحة وفقاً لخطط وأسس معينة» وقد يطلقون 
عليه تصميم الصفحة sÍ Newspaper Design‏ توضيب الصفحة Li «Newspaper Layout‏ 
الكتابات الغربية في هذا المجال فتستخدم تعبير (تصميم) الصفحة وهندستها باعتبار أن الإخراج عملية 


تصميمية:؛ ويُعدون أن الإخراج عملية تصميم مركبة تتم على مرحلتين متعاقبتين ومتلازمتين تقريباً: 
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1- المرحلة الأولى طويلة المدى: وتتضمن وضع التصميم ‘Basic Design 4ajsuall oli)‏ 
والذي يحدد هويتهاء ويرسم ملامحهاء ويتميز بالثبات النسبيء» فلا يتغير إلا خلال فترات زمنية 
طويلة. 

2- المرحلة الثانية قصيرة المدى: يتم فيها وضع التصميم المتغير للصحيفة دورياًء يومياً أو أسبوعياًء 
بما يتفق مع ترتيب وتوزيع المواد التحريرية» والعناصر التيبوغرافية» وفقاً لأحد الأساليب 


والمدارس الإخراجية المعروفة. 


ويُذكر المصطلحان مترافقين أيضاً في كثير من الأدبيات التي تتحدث عن تصميم الصحف الإلكترونية؛ 
لأن المصمم هو الذي يقوم بعملية إخراجها حتى وهي قيد الاستخدام» بينما تنتهي علاقة المخرج 
الصحفي بصحيفته فور خروج الصحيفة من المطبعة» ولهذا فإن الحديث عن تصميم الصحف 
الإلكترونية سيتداخل معه الحديث عن إخراج الصحف الإلكترونية مع الأخذ بعين الاعتبار أن قواعد 
إخراج وتصميم الصحف الإلكترونية ينطبق عليها قواعد وإخراج صفحات الويب» والذي سبق ذكره في 
الوحدات السابقة» لكن التركيز هنا سيتم على العناصر البنائية الصحفية التي قد يتشابه بعضها مع 
عناصر بناء صفحة الويب» والتي يمكن تقسيمها أيضاً إلى ثلاثة أنواع: 


٠‏ العناصر البنائية التيبوغرافية التقليدية: من نصوص وخطوط 
وعناوين وفواصل وجداول. 

© العناصر البنائية الغرافيكية: الرسوم والصور والألوان. 

ه العناصر البنائية التكنولوجية: الوسائط المتعددة والنص 
المتشعب» ويعتمد إخراجها وتصميمها على مجموعة من 
الأسس التي يرتكز بعضها على الإدراك البصريء ومنها ما 
يعتمد على التركيبة النفسية للمستخدم» ومنها أسس صحفية 
خاصة بالقيم الخبرية» وأخرى فنية تهتم بطريقة عرض المادة 
الصحفية وشكلها. 
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سادساً: أسس الإخراج الصحفي 
أ- الأسس الفيزيولوجية: 


تعتمد الأسس الفيزيولوجية على الاهتمام بدراسة العين باعتبارها أداة القراءة» ويهتم المخرج الصحفي 
بالمبادئ التشريحية لهذه الأداة» وأهم الوظائف التي تؤديها حتى يستطيع أن يوفر للمستخدم عملية القراءة 


بوضوح وهدوء مع مراعاة قدرة العين على القراءة 
من الشاشة» وتأثرها بالعديد من العوامل» فالعين 
تتأثر بدرجة سطوع الشاشة» وبصغر حجم الحرف 
وطريقة عرضه. إذ لا يفضل الحرف المائل لأنه 
يظهر متموجاً على الشاشة» وكذلك تتأثر العين 
بالألوان المستخدمة:» lig,‏ للنظرية السائدة 





~ os 
-mn ae 


للإدراك الحسي البشري للألوان فإن شبكية العين تمتلك ثلاثة أنواع من الخلايا المخروطية وكل واحدة 
منها حساسة إلى مدى معين من الأطوال الموجية المختلفة» لذلك فإن تميز أي لون يمكن أن يثار بمزج 
الألوان الأساسية الثلاثة (الأحمر والأزرق والأخضر).» ويعمل التلفزيون الملون على هذه الفكرة ويعطي 
انطباعاً للطيف اللوني كاملاً باستعمال مصفوفات فسفورية نقطية من الأخضر والأحمر والأزرق» ولكن 
مجموعة مختلفة من الألوان الأساسية تستعمل في الطباعة لأن الألوان والصبغات تمتزج بطرائق مختلفة 
عن امتزاج الضوء الملون لتشكيل الطيف اللوني. 


ويعد تيسير عملية القراءة من الأهداف الرئيسة للإخراج الصحفيء وذلك 
لان الصحيفة هي عبارة عن وسيلة بصرية لإيصال مضصمون الرسالة 
الإعلامية إلى عقل القارئ لإحداث التأثير المطلوب» وقد ذكرت بعض e E‏ 


الدراسات أن العين لا تقرأ المضامين بشكل خطوطهء وإنما تقرؤها على عه - 


7 
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وتتطلب عملية تحريك عين المشاهد خلال صفحة الويب مراعاة مجموعة من الاعتبارات أهمها: 


1- ضرورة ترتيب العناصر المتشابهة بطريقة متدرجة. 
2- ضرورة وضوح أدوات الإبحار المتمثلة في الروابط. 
3- ضرورة ترتيب العناصر البنائية على الصفحة حتى لا تتحرك (العين) حركة عشوائية. 
ب-الأسس الصحفية: 
الصحيفة (الإلكترونية وغير الإلكترونية) هي شكل B‏ 
ومضمون» أو بتعبير آخر مظهر ومحتوى» ولكي © 
يكتمل بناء الصحيفة وتؤديَ وظيفتها على أكمل وجه mie‏ 
rain: =‏ 


يجب أن يهتم المصمم بهذين الركنين» الشكل 





- 0 پەد 
ل 01/24 
maa‏ 

Were 


owns omen 





tart 


um 





والمحتوى» وقد ينصرف المستخدمون عن الصحف i‏ 2 


ow 


أو المواقع ذات المضمون الجيد لرداءة شكلهاء فإن المظهر الجيد والجذاب الذي يحتوي على مادة تافهة 
ورديئة يصدم القراء» وهناك مجموعة من الشروط الواجب توافرها في المحتوى الصحفي حتى يكون 
صالحاً للنشر منها: الصدق والدقة» والقرب والضخامة» والغرابة والحالية» والجدة والإثارة» كما تزداد أهمية 
المضمون الصحفي كلما زاد عدد الأشخاص الذين يمس حياتهم ويقترب من اهتماماتهم» وكلما وضحت 


دلالة ومغزى سياسة الصحيفة أو الموقع. 
da‏ الأسس الفنية: 


إن الإخراج الصحفي الحديث ينظر إلى الموقع أو 
الصحيفة على أنها وحدة متكاملة من حيث الشكل 
العام الذي يكسبها شخصية مميزة بين الصحف 
الإلكترونية» والمخرج الصحفي هو الذي يقوم 
بوضع كل خبر في المكان المناسب له على 


iaia‏ وهو الذي يراعي دائماً أن تكون 
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العناصر البنائية منسقة بشكل جميلء مؤلّفة معاً وحدة متكاملة تجذب القارئ» والتكوين الفني للصفحة له 


خصائص لا بد من توافرها كالتوازن والإيقاع والوحدة والتباين. 
=a‏ الأسس النفسية: 


تتعلق هذه الأسس بالمستخدم ذاته من حيث 
التركيب النفسي والنضج العقلي الذي تتحكم فيه 
متغيرات منها: 
1-الفئة العمرية للمستخدم: فالمستخدمون 
الشباب يفضلون التصميم الحيوي المتجدد 
دأكماء شكلا ومضفوتا» أمنا كيان الس 





فيفضلون الإخراج والتصميم التقليدي usps Biladi‏ أن الإخراج العمودي أكبر دليل على 
الوقار» أما الأطفال فيفضلون الصور والألوان. 

2- جنس المستخدم: تفرق الأسس النفسية للإخراج الصحفي بين الذكور والإناث» والقاعدة النفسية 
تنصح باختيار ما يعبر عن الرجل إذا كان موجهاً إلى الجنسين» وإبراز النواحي النسائية في 
المضامين الموجهة للنساءء والاهتمام بالنواحي العاطفية عند المرأة كالأمومة والأسرة. 

3- عادات القراءة أو التصفح: يختلف المستخدمون من حيث أساليبهم في القراءة والتصفح» ويفضل 
البعض قراءة العناوين» واختيار ما يهمه من الأخبار ليقرأهاء ومنهم من يفضل قراءة مقدمات 
الأخبار» بينما يركز آخرون على النواحي الأدبية والفنية» وعلى المخرج أن يحصل على 
المعلومات الكافية عن عادات وأساليب التصفح» حتى يلبي لهؤلاء جميعاً ما يتناسب مع عاداتهم 
وحاجاتهم. 

4- ذوق القارئ وعقليته وأحياناً تعليمه: دلت الدراسات على أن المستخدمين الأعلى تعليماً والأكثر 
ثقافة لا يهتمون كثيراً بالعناوين العريضة والألوان وكثرة الصورء. بل يهتمون أكثر بالمضامين 
والأفكار المطروحة والمعلومات» وهذا ما يدعو المخرج إلى العمل على إيجاد التوازن المطلوب 
بين الأسلوب الإخراجي الجذاب» والمحتوى المعلوماتي العميق. 
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وفي هذا الإطار لا بد من أن يضع مخرج الصحيفة في الاعتبار دراسة الجمهور من الناحية النفسية 
والتعرف على السمات أو الأمزجة النفسية لكل فئة من فئات الجمهور ونوعيته» ومضمون المادة 


التحريرية التي تدخل في دائرة اهتمام كل فئة. 


والتركيب النفسي لجمهور القراء» ليس فقط هو الذي يتحكم في أمزجة القراء ويحدد مجالات اهتمامهمء 
وانما أيضاً درجة النضج العقلي التي تمثل جانباً مهماً لتكوين اتجاهات القراء واهتمامهم» ويتحكم في 
درجة النضج العقلي مجموعة من المتغيرات من أهمها السن والجنس والعادات والتقاليد. 


هذه الأسس» وغيرها من المبادئ والأسس التي تحكم عملية تصميم واخراج الصحافة التقليدية 
والإلكترونية يضعها المصمم بعين الاعتبار في أثناء تصميمهء ويراعي تلافي أوجه الضعف التي 
تعترض تصفحها بشكل أسهل لتحقيق الاستفادة القصوى من خصائصهاء ومن أوجه الضعف هذه: 
1- يسهل التعامل مع الوثيقة الورقية من حيث القراءة والتقليب والوصول إليهاء بينما تقفز عين 
المستخدم قفزاً بين سطور المعلومات على شاشة الكمبيوترء وقد يجد صعوبة في التعرف على 
أدوات الإبحار. 
2- يرغب المتصفح بالتعرف سريعاً على محتويات الصفحة» ليعرف إن كانت تهمه أو لاء لينتقل 
إلى موقع آخر. 
3-يصعب على الصفحة الإلكترونية استيعاب كل المعلومات» ليس من الناحية التقنية» وانما من 
حيث أسلوب العرض المفضل. 
4- الاختلافات الكبيرة بين اهتمامات وإمكانيات المستخدمين» فمنهم من يفضل الإيجاز» ومنهم من 


يفضل السرد الطويل» ومنهم من لديه الاهتمام بموضوعات معينة» ومنهم من لا يهتم. 
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وقد حدد الباحثون لتلافي أوجه الضعف هذه وغيرها 
مجموعة من شروط بناء مواقع الصحف الإلكترونيةء 
التي تساعد المصمم على تلبية احتياجات المستخدمين 
المختلفة» ومنها: 





1-المزج بين المحتوى والشكل عند تكوين الموضوع أو الفكرة» ويتم هذا بتعاون المحرر مع المصمم 

في إنشاء التصميم الذي يساعد على سرعة وسهولة التصفح. 

2- يجب أن يظهر التصميم بصورة واضحة وسريعة للمستخدم بحيث يتضمن خريطة للمحتوى في 
شكل رسوميات أو عناوين تساعد المستخدم في التحرك والتنقل بين الصفحات» ويتحقق ذلك من 
خلال مهارة كتابة العناوين الرئيسية والفرعية» وتحقيق الروابط بين الأجزاء والمقاطع أو 
الصفحات مع عدم تجزئتها في الصفحة الواحدة» واستخدام أسلوب ثابت للكتابة في الأجزاء 
والصفحات المرتبطة. 

3- تصميم المحتوى المعلوماتي على شكل أعمدة حتى لا يؤدي إلى إجهاد العين في تتبع السطور 
الطويلة» ولتوفير مساحات بيضاء تخفف من هذا الإجهاد» ويذكر الباحثون أن السطر يجب أن 
يتراوح ما بين 40 و60 حرفاً بحيث يتراوح حجمه بين 12 إلى 14 بنطاًء مع تجنب الكثافة 
السوداء» والخطوط المائلة. 

4- وضع القوائم الأفقية والرأسية» وتضمينها عناوين مركزة» وتضمين النصوص كلمات مفتاحية 
مميزة» وعناوين دالة» وكتل قصيرة من النص. 

5- تجنب العناصر الوامضة والمتحركة لأنها تشتت انتباه المستخدم» وتبطئ من عملية حصوله على 
المعلومات. 

6- استخدام الخصائص التيبوغرافية المختلفة لعرض النص على الشاشة» كاستخدام الألوان المعبرة 
والخطوط الواضحة والبارزة. 

7- التأكد في أثناء عملية التصميم أن أشكال الحروف المستخدمة متوافرة لدى المستخدم بالتركيز 
على أنواع الخطوط الأكثر شيوعاً. 
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8- الحد من استخدام الأرضيات المنقوشة أو AGS jal)‏ والصور والعناصر الغرافيكية التي تبطئ 
من عملية تحميل صفحة الصحيفة الإلكترونية» كما يجب أن يقلل من طولهاء ولا يمدها على 
أكثر من شاشة. 

9- يؤكد of Jackob Nielson‏ استخدام الإطارات في عرض المحتوى الإعلامي يعيق عملية 
الطباعة والتصفح» ويرى ضرورة استخدامها بشكل معقولء ولاسيما أن المتصفحات الحديثة قد 
حلت هذه الإشكاليات» وبالتالي يمكن الاستفادة من مزاياها في إبراز المعلومات» والفصل بينها 
أحياناً. 
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خاتمه: 
أصبحت الصحافة الإلكترونية في الوقت الحالي جزءاً أساسياً من وسائل الإعلام الجماهيرية التي 
يستخدمها الملايين من المستخدمين» ويعدونها واحدة من المصادر الأساسية للحصول على المعلومات› 
وتتمتع هذه الصحف بالعديد من الخصائص والسمات التي جعلتها وسيلة مختلفة عن باقي الوسائل 
الورقية والإذاعية والتلفزيونية» فهي تجمع هذه الوسائل معاء وتستفيد من ميزاتها وميزات الإنترنت التي 
تظهر عبرهاء ويشكل تصميم هذه الصحف الخطوة الأولى في طريق نجاح هذه الوسائل ووصولها إلى 
المستخدمين» لذلك يعتمد المصممون على طرائق وأسس الإخراج الصحفي التقليدي المختلفة» وأسس 
وطرائق الإخراج الصحفي الإلكتروني لضمان نجاحهاء وضمان تحقيقها لمتطلبات المستخدم وحاجاته. 

ويستفيد المصممون في تصميمهم واخراجهم لهذه الصحف من مجموعة العناصر الصحفية التيبوغرافية: 
كالنصوص والعناوين» والخطوط والفواصل والجداول التي تعتمد عليها الصحافة التقليدية الورقيةء 
والعناصر الغرافيكية كالصور والرسوميات والألوان» والعناصر التكنولوجية كالوسائط المتعددة والنصوص 
التشعبية في بناء هذه الصحف» وذلك من خلال تنظيم هذه العناصر وترتيبها بالشكل الذي يحقق 
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الخلاصة 


تضم الصحافة الإلكترونية العديد من مواقع الصحف الإلكترونية سواء لها أصل ورقي أم لاء ومواقع 
القنوات التلفزيونية والإذاعية» ومواقع وكالات الأنباء» وغيرها من المواقع الإخبارية التي تنقل وتحدث 
الأخبار والمعلومات بشكل دوريء لذلك يصنفها الباحثون إلى صحف إلكترونية كاملة» ونسخ إلكترونية 
عن وسائل الإعلامية موجودةء وتتميز هذه الصحف بالعديد من الميزات والخصائص كاستخدام الوسائط 


المتعددة» والنصوص التشعبية» والتفاعلية والآنية» ووجود الأرشيف الإلكتروني. 


ويتداخل مفهوم تصميم هذه الصحف مع مفهوم الإخراج الصحفي لهاء وهما المفهومان اللذان يشكلان 
المرحلتين الأساسيتين لنشر هذه الصحف على الإنترنت» ففي المرحلة الأولى» التصميم: يتم فيها وضع 
الخطوط العريضة والثابتة لتوزيع العناصر البنائية للصحيفة الإلكترونية» وفي المرحلة الثانية» الإخراج 
الصحفي: يتم فيها وضع التصميم المتغير للصحيفة دورياً» يومياً أو أسبوعياًء بما يتفق مع ترتيب وتوزيع 
المواد التحريرية والعناصر التيبوغرافية» ويتم بناء هذا التصميم المتغيرء الإخراج الصحفيء بناءً على 
مجموعة من الأسس النفسية والفيزيولوجية» والفنية والصحفية» وهذه الأسس وغيرها من المبادئ والأسس 
التي تحكم عملية تصميم وإخراج الصحافة التقليدية والإلكترونية يضعها المصمم بعين الاعتبار في أثناء 
تصميمه» ويراعي تلافي أوجه الضعف التي تعترض تصفحها بشكل أسهل» لتحقيق الاستفادة القصوى 
من خصائصهاء وذلك من خلال وضع العديد من شروط بناء المواقع الصحفية الإلكترونية. 
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اختر الإجابة الصحيحة: 


1. ليست من الصحف الإلكترونية: 

8. مواقع المحطات الإذاعية والتلفزيونية. 

8. مواقع الصحف الإلكترونية التي ليس لها أصل ورقي. 
.C‏ مواقع وكالات الأنباء. 

0 التيليتكست. 


الإجابة الصحيحة: 0 التيليتكست 


بسن خصائضن الصتحافة الالكترودة: 
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3. يفضل الشباب التصميم الرصين الذي يتسم بالوقار والجدية. 


pu «A 
LSB 


الإجابة الصحيحة: 8 خطأ 


4. تفرق الأسس النفسية للإخراج الصحفي بين الذكور والإناث» والقاعدة النفسية تنصح باختيار ما 
يعبر عن الرجل إذا كان موجهاً إلى الجنسين. 


E. 
خطأ‎ .8 
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الوحدة التعليمية التاسعة 
عناصر تصميم الصحيفة الإلكترونية 


العناصر التقليدية - العناصر التيبوغرافية والغرافيكية 


العناصر a‏ 
مقدمة. 


عناصر تصميم الصحافة الإلكترونية. 


العناصر التيبوغرافية: 
e‏ النتصوص. 
© العناوين . 
الخطوط. 
ف الفواضق: المذاول والإطارات: 
ف لسرن رميات 
« الألوان. 
خاتمة. 
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الأهداف التعليمية: 
بعد دراسة هذه الوحدة التعليمية يجب أن يكون الطالب قادراً على أن: 
يحدد العناصر التقليدية في تصميم الصحافة الإلكترونية. 


1ك يقرن التضيوصن: 
2- يشرح العناوين. 

قر ات 

4 برح الفراضبل + الجدارل والإطارات:. 
5- يشرح الصور والرسوميات. 


6- يشرح الألوان. 


الكلمات: المقتاحية: الصبحافة اللكتووفية ت نشيكة الزيتبب العداضى .التريوغزافية — paliall‏ 
الغرافيكية النصوص - الانقرائية - الخطوط - نوع الخطوط - حجم الخطوط - اتساع السطور- النص 
القيادي - العناوين - العناوين المتغيرة - العناوين الثابتة - العناوين الرئيسية - العناوين المجمعة - 
العناوين الفرعية - المقدمات - الصور- الوظيفة التزيينية - الوظيفة التفسيرية - الوظيفة التصويرية - 
الوظيفة الإخبارية - الوظيفة الاتصالية - وظيفة الربط - الوظيفة البصرية - الوظيفة التيبوغرافية - 
A‏ ب الإطاراظ: ت الرسيؤميات. + agus‏ الكاريكاتررية سح الرس التسيرية ت A‏ 
اة 
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أولاً: مقدمة 


ككل المون Ly‏ ته جن اا 

-NEWS E E T E 
zj الت‎ pai وهي‎ a A paal 

ورثتها عن الصحافة الورقية عندما انتقلت إلى 


or AS ee AY A ] 1‏ حي 
الإنترنت» إلا آن المصممين والمخرجين في البيئة LTO‏ ش 


— cla gia gg ta garddul Ay SSIYI 


وأخضعوها للمتطلبات البصرية والتقنية للوسيلة الجديدة بما يناسب هذه البيئة» وبما يخدم الرسالة 
الإعلامية» ويحقق وصولها إلى المستخدمين بنجاح» واستفادوا في الوقت نفسه من الإمكانيات المتطورة 
التي وفرتها هذه البيئة» كتوفير العديد من أنماط الخطوط أو توفير الملايين من تدرجات الألوان التي 
يمكن استخدامها في هذه المواقع» والتي لم يكن بالإمكان رؤيتها في الصحافة التقليدية» وإن كان بعض 
المصممين يرون في هذا العنصر بالتحديد أنه يدخل ضمن العناصر الغرافيكية. 


في هذه الوحدة سيتم التعرض للعناصر التيبوغرافية التقليدية المستخدمة في تصميم وبناء الصحيفة 
الإلكترونية: النصوص والخطوط والعناوين والجداول والفواصل» وطرق تقديمهاء وقواعد استخدامها في 
هذه الصحف» والوظائف التي تؤديهاء كما سيتم التعرض للعناصر التقليدية الأخرى كالصور الثابتة 
والألوان» وهي العناصر التي يفضل بعض المصممين أن يضعها ضمن مسمى العناصر الغرافيكية. 
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ثانياً: العناصر البنائية التيبوغرافية 
أ- النصوص: 


مازالت النصوص تحتل المراكز الأولى في اعتماد الصحف 
الإلكترونية والورقية عليها في بنائها الشكلي والدلالي» على 
الرغم من احتواء الإنترنت على عناصر بنائية ذات مقدرة 
عالية على نقل المضمون إلى القارئ في يسر وسهولةء 
فالنص ولاسيما الصحفي هو الوعاء الذي يحمل المعاني 
والأفكار التي يريد الصحفي توصيلها إلى المستخدم» وذلك 
باستخدام الحروف المتعارف عليها» ويضم النص في بعض 
الفنون الصحفية عادة: الخطوط والعناوين والمقدمات» ولكل 
نوع من هذه العناصر الثلاثة قواعد تحكم حركته داخل 
البناء الشكلي للصحيفة والمختصرة في الانقرائية 
Readability‏ فالمخرج يهدف من وراء انقرائية النص إلى تقديم شكل يريح القارئ بصرياً ونفسياً 
لتحقيق التوافق بين الشكل والمضمونء كما يهدف إلى تحديد طريقة الدخول إلى النص من خلال 
العناوين الأساسية والفرعية والمقدمات. 





Readability 


ويعرّف علماء التيبوغرافيا الانقرائية بأنها 'سهولة قراءة 
العين للنص"٠‏ ويحددون مجموعة من العوامل تؤثر على 
الانقرائية» والتي يرتبط بعضها بالبنية الأساسية للنص» 
كنوع الخط وحجم السطر والعناوين» ويرتبط بعضها 
الآخر مثل الخلفيات والأماميات والتباين بالألوان» وسيأتي 
كرا فى Cysall‏ عن العناصر «القرافيكية) .ومن هذه 
العوامل: 

1 محاناة التص بها ينقاسب واللغة الستعدمة. تاحية اليسار .في lly ASA Aal‏ اليمين' في 





Ayal) Sai 
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2- استخدام نوع الخط بما يتفق مع المضمون المقدم في النص. 

3- تجنب استخدام أكثر من حجمين أو ثلاثة على الأكثر من الخطوط في النص. 

4- البساطة في استخدام الخطوطء وعدم استخدام الخطوط المزخرفة وغير التقليدية» إلا بما يتناسب 
مع المضمون المعلوماتي المقدم» كالموضوعات التراثية أو التاريخية أو الدينية أحياناً. 

5- استخدام النص القيادي Leading text‏ مثل العناوين والمقدمات بخط أكبر من النصوص. 

6- تحديد طول السطر بما يشابه طول السطر المستخدم في الصحافة الورقية. 

7- تحديد المسافات بين النصوص والهوامش من دون التعدي على المساحة المخصصة للمحتوى 
المعلوماتي. 

8- تحقيق التباين بين النص والخلفيات باستخدام ألوان متباينة. 

9- استخدام أدوات الإبراز من دون مبالغة» مثل: استخدام الخط المائل» والعريض» ووضع خط تحت 
الكلمةء وثلوين النص. 


العناصر المتضمنة في النص: 


وتضم النصوص مجموعة من العناصر المتضمنة 
فيهاء وهي العناصر التي تعطيها قوة التأثير 
المطلوبة على القارئ الذي يستطيع التوصل إلى 
المعاني والأفكار المتضمنة فيها بشكل أفضلء» 
وهي الحروف أو الخطوطء والعناوين والمقدمات» 
أو ما يطلق عليها النص القيادي: 





1- الحروف أو الخطوط: وتشكل الحروف الأساس الذي ثبنى وتشكل منها المادة النصيةء ويتوقف نجاح 
هذه المادة ومدى وضوحها واقبال القراء عليهاء على: نوع الخط وحجمه واتساع السطور: 
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أ- نوع الخط: 


تتيح تكنولوجيا الويب للصحيفة الإلكترونية ee,‏ . 
` ا , 0 1 .` “Verdana, Verdana,‏ 
مجموعة من الخطوط في صفحتهاء ويقوم ,* Verdana‏ 
e eaa a‏ و ال $ 
TIME NEW ROMAN .‏ 
بترتيب كتابتهاء واذا لم يدعمها يقوم بوضع ` 
Asans serif font: Franklin Gothic :‏ 


الخط الافتراضي بدلاً من هذه الخطوط. 
قد أوضحت الدراسات أن نوع الخط المستخدم يؤثر بشكل كبير على الانقرائية: 
o‏ الخطوط التي لا تحتوي على Sans-Serif ily}‏ أفضل في قراءتها من تلك التي تحتوي 
على زوائد كالخطوط الكوفية مثلاً. 
gai sa Arial Lall o‏ الخطوط للقراءة بحجم 12 نقطة. 
e‏ الخط Times New Roman‏ هو الأسوأ في القراءة عبر الشاشة سواء أكان ذلك في 
الخطوط الكبيرة أم الصغيرة. 
e‏ خط Verdana‏ هو الأفضل في قراءته» وقد عدّ المصممون أن خط dai a Arial‏ 
بالنسبة للعناوين والمقدمات؛ gd Verdana LÍ‏ الأفضل بالنسبة للنص المستمر. 
هذه القواعد تصدق على الخطوط الإنجليزية ولا تصدق على الخطوط العربية. 
كما دلت الدراسات على أن استخدام عائلة الحروف نضسَها أمڙ ضروري لإيجاد الاتساق ووحدة 


الرؤية» فيجب استخدام عائلة الحروف نفسها في العناوين وقوالب النصوصء والأزرار والقوائم. 
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aman) 
التشترقدالدو‎ ha 5-0-2 


السيت 01 صفر 1434 ه 15 ديسمير 2012 السيث 01 صقر 1434 ه 15 بيسمير 2012 السد 12436 70007 


صفحة المدخل | الأولى الأخبار 


اخ اي مع ع ع يجي يع ع ييا يع ع ع واي مه يه هدم ود 
ee te‏ سم سع مم ممسع ممم ممم مم ممعي 


۰ لا تزا ال مذكرات التوقيف السورية الصائر 1 يحق Oe)‏ سعد الحرم 
? الجدل الإعلام والسياسي لا سيّما الها لم للك طريق الأصول والل, 
i‏ من هنا يعتبر وزير العدل اللبناني إبراهيم نجارء هذه المذكر اث غير 
٠‏ العدل اللبناني AS got) ed gg 1) Ball oe Adds GA‏ 
` 

: 

le DA yf‏ هذه المذكرات إلى الإنتربول. لا يعني بالضرو 
؛ وهي ليست مفيذة بكل ما بردها من طلبات: وياتتاني يعود إلبها اتخلا 
۽ ويتفت إبراهيم إلى أن «وصول هذه المذكراث التي صدرت في 9 دي 
؟ القضانية بين لبنان وسورياء ومن ضمنها التبليغ بهده الطريقه وبالة 
| مع العثم أنه كان قد أعثن أن المنظمة الدولبة نلشرطة الجنانية «1م 
۽ في الدول العريبة يفيد بأنه «نن يتم الاحنفاظ بها في قاعدة بيانات الا 
؛ هنهد واتني تنص على أنه (بمنع منها باتا عنى المنظمة أن تتدخل فر 


0 في المقابل» وخاصة بعد اتضاح صور ا ار ات من الناحية انا 
a‏ هيشال سماحه المع فة الد 


. تحمه مزاقف 3 









size:18 


size :16 


size:14 


ب-حجم الخط: 


تستخدم صفحة الإنترنت مقاييسّ نسبية 
في تحديد أحجام الحروف المستخدمة» 
ويلاقي هذا التحديد العديد من 
الإشكاليات منها: 


o‏ بعض المتصفحات لا تدعم بعض 
أحجام الحروف» كما أن للشاشة 
تأثيراً كبيراً في اختلافها. 

« لغة البرمجة المستخدمة في تصميم 
هذه الصفحات» فلغة ال CSS‏ 


تسمح باستخدام الخطوط الكبيرة» 


بينما تعتمد لغة ال 111/1]» أساليب مختلفة لتحديد أحجامها منها التقسيم الاثنا عشري» 


والتقسيم السداسيء والتقسيم السباعي. 


وقد اتفقت الدراسات على حجم الخط المثالي أنه الحجم الأكبر من الحجم المستخدم في 


الصحافة الورقية مع مراعاة القواعد التالية: 


1- حجم خطوط المقدمات أكبر من حجم خطوط المتن النصي بنقطتين. 
2- حجم خطوط العناوين أكبر من حجم خطوط المقدمات بنقطتين أيضاً. 
وذلك لمساعدة عين المستخدم على التدرج البصري من الأكبر إلى الأصغرء ولتنظيم الصفحة 


بشكل سلس وجذاب. 


ج- اتساع السطر: 


يرتبط طول السطر المستخدم في عرض المحتوى المعلوماتي بعوامل مختلفة منها: 


© عين المستخدم. 
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٠‏ تباين ووضوح الشاشة. 

o‏ نوع المستعرض. 

Ware حجم الحروف‎ o 

وقد توصل التيبوغرافيون إلى مجموعة من القواعد التي يمكن من خلالها تحديد طول 
السطرء منها: 

٠‏ قاعدة الثلاث بوصات والبيكسل: 
إذ ترى هذه القاعدة أن طول السطر يجب ألا يتجاوز ثلاث بوصات؛ لأن حركة 
العين تكون في أقصى تركيز لها في هذه المسافة» وأن المستخدم سيفقد هذا 
التركيز» ويفقد مسار القراءة إذا كان السطر طويلاًء أما القاعدة الثانية فترى أن طول 
السطر المناسب هو 365 بيكسل»ء أي 3.8 بوصة عندما يكون تباين ASLAN‏ 
0 بيكسل. 

« قاعدة الحروف الأبجدية ونصفها: 
وترى هذه القاعدة أن طول السطر المناسب هو الذي يحتوي عدد حروف اللغة 
ونصقهاء وبناءً على ذلك فإن عدد الحروف المناسبة في السطر (العربي) هو 42 
حرفا . 

o‏ قاعدة جداء عدد النقاط باثنين: 
ورأت هذه القاعدة أن طول السطر يقاس من خلال معرفة حجم الخط بالنقطة × 
اثنين» فإذا كان حجم الخط 14 نقطة» فإن طول السطر يساوي 28 نقطة. 

o‏ قاعدة عدد الكلمات: 
من الباحثين من رأى أن عدد الكلمات المناسبة في السطر من عشر إلى اثنتي 
عشرة كلمة» مما يعطي للمستخدم فرصة إيجاد السطر التالي ويمنع الزيُغ البصري, 
chs‏ بعضهم الآخر أن السطر يجب ألا يزيد عن ثماني إلى خمس عشرة كلمة. 

o‏ قاعدة عدد الحروف: 
ترى قاعدة عدد الحروف أن طول السطر يجب ألا يقل عن خمسين حرفاً إلى 78 
حرفاًء ووفقاً لهذه القاعدة: 


٠‏ عرض السطور الطويلة أفضل من السطور القصير. 
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© من غير المفضل تقسيم الصفحة إلى أعمدة. 
2- العناوين والمقدمات ) النص القيادي Leading ٠٠×٤‏ (: 
ويشمل النصوص المكتوبة بخط كبير أي العناوين والمقدمات» وهي التي تقود القارئ إلى المتن» وتساعده 
على التنقل فيه بيسر وسهولةء وهي العناصر الأكثر جذباً للانتباه واثارة للاهتمام. 


-Í‏ العناوين: 
تتفاوت أهمية العناوين من صفحة إلى أخرى في الصحيفة 
الإلكترونية» لكنها وبشكل عام من أهم العناصر التيبوغرافية 
في بناء الصفحات وتحديد هيكلتهاء لذلك يجب أن تتسم 


بالصفات الكالية: 





1- البساطة» وعدم تعدد أسطرهاء تحقيقاً لمبدأ الإيجاز 
على الإنترنت. 
2- الوضوح في المحتوى» وعرضها إما بأسلوب 
الإخراج الصحفي العمودي أي أسلوب الأعمدةء أو 
بأسلوب الإخراج الصحفي الأفقي الذي يتيح نشر الموضوعات بشكل عرضي. 
وظائف العناوين من الناحية التيبوغرافية: 
ومن الناحية التيبوغرافية فإن العناوين تحقق الوظائف التالية: 
التعريف بمحتوى الأخبار والمعلومات» وشرح حقائقها بشكل مختصر. 
1- تحديد وتوضيح شخصية الصحيفة الإلكترونية» وغير 
الإلكترونية. 
2- تسويق الموضوع والترويج له من خلال العنوان الذي 
يدعو المستخدم إلى تصفح المادة أو الخبر الصحفي. 
3- زيادة جاذبية الصحيفة» والمساهمة في إخراجها الفني 


بشكل يلائم ميول المستخدم ورغباته. 
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أنواع العناوين بالصحف الإلكترونية: 


1- العناوين الثابتة: وهي العناوين التي لا تتغير من عدد إلى آخرء أو من تحديث إلى آخرء 
وتستخدمها الصحف الإلكترونية في عرض أبوابها الثابتة» وعادة ما تضعها الصحف على شكل 
عناوين تتلو بعضها البعض في الجهة اليمنى من الصحف التي تبدأ فيها الكتابة من جهة 
اليمين» ومن الجهة اليسرى في الصحف التي تبدأ فيها الكتابة من الجهة اليسرى. 
كما أن الصحف الإلكترونية قد تستخدم الجهة اليمنى من الصحيفة في تقديم عناوينها شبه الثابتة 
وهي التي تخضع للتغير وفقاً لمتطلبات التحديث غير الجوهري للموقع. 

2- العناوين المتغيرة: هي العناوين التي تتغير من عدد إلى آخرء أو من تحديث إلى آخر وتشمل: 

O‏ العناوين الرئيسية: هي العناوين التي تحتوي على مقدمات» وتكون مميزة من ناحية 
الموقع والمساحة والحجم» وتوضع هذه العناوين في صدر الصفحةء كما أنها تشغل 
مساحة أكبر من غيرها نتيجة لأن الخط المستخدم فيها يكون أكبر خط مستخدم في 
الصحيفة. 

« العناوين المجمعة: هي العناوين الأقل أهمية من وجهة نظر الصحيفةء لذلك تضعها في 
نهاية الصفحة وراء بعضها البعض دونما تمييز من ناحية الموقع أو المساحة أو الحجم. 

٠‏ العناوين الفرعية: هي العناوين التابعة للعناوين الرئيسية وتكون عادة ذات نص فائق إلا 
أن حجمها عادة ما يكون صغيراًء يصل إلى حجم النص المستخدم في عرض الموضوع 
أو الخبر أو أقل منها. 


العناوين التي تستخدم كعناصر تيبوغرافية ost‏ تصميم الصحيفة الإلكترونية: 
كما أن هناك مجموعة من العناوين التي شتخدم كعناصر تيبوغرافية في تصميم الصحيفة 
الإلكترونيةء ومنها: 
1- عنوان الصفحة ال 11118: ويظهر في معظم برامج التصفح أعلى النافذة التي تُعرض فيها 
الصفحة في ال Gylgiell laa, «Title Bar‏ لا يظهر في الصفحة نفسهاء وانما في النافذة التي 
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يفتحها المتصفح لاستعراضهاء وهذا العنوان يساعد المستخدم على التعرف على الصفحة 
التي يقف عندها. 
2- عنوان المادة 1©30179!: ويضم هذا العنوان نوعين من العناوين: 
أ- العنوان التحليلي: وهو النوع الذي يشير إلى أقسام النصء» من مقدمة وتعريف وخلفية 
EET‏ 
ب-عنوان العرض: وهو العنوان الذي يحمل مضمون النص» ويساعد المستخدم على فهم 
محتوياته» وهذه العناوين من أهم العناصر التي يسعى المصمم إلى إبرازهاء باستخدام 
الحجم الأكبر من الخطوط أو الألوان» أو استخدام الخط المائل» أو إضافة الحركة إليه 
أو جعله يومض. 


تزايدت أهمية المقدمات من الصحافة 
الإلكترونية» فالقارئ في الصحيفة 
الإلكترونية يكتفي بتصفح العناوين 
والمقدمات بيد أن الصحف الإلكترونية 
تتجاهل التقديم الجمالي والشكلي للمقدمات» 
وربما تكتفي بكتابتها بخط المتن الأصلي 


نفسه. 
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| قدمات مدقاة (”ذاعى” في هنيح والنقيفة I‏ حدت pgi àa Jis pô‏ 






نركيا بين فكي الثماشة الأعبركية . الروسية 


تعد وسائل dail‏ بين المواد بمثابة الخطوط الطولية والعرضيةء والتي تكون حدوداً فاصلة بين 
الموضوعات المختلفةء لكي لا تختلط بعضها بالبعض الآخر في عين القارئ» ويتحدد نجاح الفصل بين 
المواد باعتبارات عدة: 


- الوضوح الكافي بحيث لا يشك المستخدم في انعدام الصلة بين الموضوعات المنفصلة» أي تنظيم 
القراءة بحيث لا تختلط عين القارئ بين المواد المتجاورة. 
2- تأكيد بعض العناصر البنائية مثل إحاطتها بإطار أو جدول. 
3 - إضافة قيمة جمالية للصفحة:» وابراز المادة الصحفية وبخاصة الموضوعات داخل إطار. 


الفواصل التي تستخدمها الصحف والمواقع الإلكترونية للفصل بين الأخبار والموضوعات الصحفية: 


الفواصل للفصل بين الأخبار والموضوعات 
الصحفية» كالخطوط الرأسية (الجداول) للفصل ee Me‏ 
بين الموضوعات» و(الإطارات) للفصل بين | تت 
الصفحات» إذ شتخدم الفواصل للتأكيد على . ES ET‏ مشا 
المضمون من زاوية» وفصله عن الموضوع 


المجاور من زاوية أخرى. 
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1-الجداول: 


هي الخطوط التي تسعى كل المواقع 
والصحف الإلكترونية إلى استخدامها 
للفصل بين المواد التحريرية المنشورة على 
صفحات الموقع فصلاً كاملا وتُقسم إلى 
خطوط طولية (الجداول الطولية)» وخطوط 
عرضية (الجداول العرضية)» وقد تكون 
الجداول ظاهرة أو 





مخفيةء ولا يقتصر استخدامها على القوائم من البيانات التي تحتاج إلى ترتيبها في صفوف 

وأعمدة» بل يتعدى ذلك إلى استخدامها في تصميم الصفحات نفسها وتنظيمها والتحكم بها 

بصورة فعالة» إذ ُستخدم الجداول 190185 لتقسيم الصفحة إلى مناطق ثابتة» ومناطق متغيرة 
الحجم» وتحتوي على نصوص وصور» وتتيح هذه الجداول مرونة في تصميم الصفحة أو 

الإضافة إلى التصميم الأصلي» ويرجع استخدام الجداول إلى: 

أ- حاجة المعلومات المطلوب عرضها على 
الصف إلى الارن lel‏ مل اة 
من الأرقام تمثل درجات الحرارة» وصفوفاً د me‏ حب 
تحوي أسماء المدن. ظ 

ب- الحاجة إلى تنظيم المعلومات بصورة تيسر 

من سهولة وسرعة قراءتها. 

ت-تيسير تحديث المعلومات على الصفحة 


في وقت لاحق» وبصورة سريعة. 


EEN +: 
BJ E E1 I قا قة‎ 
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ث- الجداول أسلوب لتنظيم محتويات الصفحة في تصميم جذاب ييسر القراءة» ويمكن أن 
تحتوي على أنواع كثيرة من المعلومات» وليس مجرد النصوص مثل الصور والروابط 
التشعبية والفقرات» ومن ثم فهي لا تشكل قيداً على نوع المعلومات التي يمكن عرضها فيه. 

1- الإطارات: وهي نوع آخر من أدوات الفصلء وتسمح هذه الأدوات في البيئة التكنولوجية لجزء من 
مستعرض الويب أن يظل ثابتاً ومن دون تغيير عن طريق تركيب صفحتين (إطارين) أو ملفين 
أو أكثر في صفحة واحدة» واظهارهم مره واحدة» بحيث يحتل كل ملف منها إطاراً من إطارات 

الشاشة» ويحقق استخدام الإطارات في تصميم الصفحات مزايا عديدة: 

أ- عرض ملفات عدة في صفحة واحدة» كل ملف في إطار مستقل وكأنها نوافذ مستقلة مع 
إمكانية التنقل من إطار إلى آخرء أي عرض المعلومات بصورة متكاملة للقارئ. 

aging‏ إمكانية حفظ بعض المعلومات بصورة ثابتة على الصفحة داخل إطار محدد» وهو 
الإطار الذي يعرض محتويات الموقع التي تتيح للقارئ التنقل بين موضوعاته مع عرض 
هذه الموضوعات في إطار آخر. 

وتعاني الإطارات من بعض المشكلات في استخدامها منها: أن بعض برامج التصفح لا تدعم 

ولا تتفهم الإطارات» الأمر الذي يجعل الصفحة بيضاء لها وللقارئ ما يسبب إحباطه؛ لذا على 

المصمم والمخرج أن يكون حريصاً على أن يتناسب تصميم الصفحة مع أنواع المتصفحات كافة 

أو توافر تصميمين للصفحة؛ أحدهما يستخدم الإطارات» والآخر لا يستخدمها. 

ويضيف بعض الباحثين الأيقونات كعناصر للفصل بين الموضوعات بشكل جميل وجذاب» 


والأيقونات رسوم صغيرة تحمل دلالة معينة» وقد يُقصد بها بعض العناوين أو النصوص. 


ثالثاً: الصور 


تناولت كثير من الدراسات الحديث عن أهمية الصور من الناحية الإخراجية» سواء بصفة مستقلة أم 
منفردة» وبصفة عامة تكتسب الصور أهميتها من الوظائف التي تؤديها داخل البناء الشكلي للصحيفة 
وذلك وفقاً لاستخداماتها داخل هذا البناء» وتشترك مع العناصر الأخرى في بناء جسم الصفحات» وتؤدي 
الصورة الصحفية وظائف متعددة منها: 
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« الوظيفة الإخبارية التي نافست بها المادة التحريرية في الصحافة الحديثة. 

٠‏ الوظيفة الجمالية فهي تضيء جوانب الصفحة وتشيع الحيوية والحركة على صفحاتهاء وتبعد 
الملل والجمود عنها. 

٠‏ كما تقف الصور والرسوم إلى جانب حروف المتن والعناوين في نقل الرسالة الإعلامية والأنماط 
التحريرية المختلفة إلى جمهور القراء» فلم يعد دور الصورة مجرد إضفاء الجاذبية على 
الصفحات» وإنما المساعدة في تجسيد المعاني وتكوين شخصية الصحيفة» وملاحقة الأحداث» 
وتحقيق فهم أعمق وأشمل للقضايا التي تعكسها. 


وتضيف الصور الرقمية الصحفية فعالية ومزيداً من الجذب والقوة على دور الصورة وتأثيراتها المتعددة 
وتصدرت الصورة الصحفية الاستفادة من هذا التغيير بالاتجاه نحو التصوير الرقمي» والاستفادة بما قدمه 


الحاسب من إمكانات مؤثرة مثل: تغيير الإضاءة وتعديل الألوان» وتخزين الصورة لحفظها بشكل أفضل. 


ويُقصد بالصورة الصحفية الصورة التي تنطق بالمعنى» وتكمل للقارئ متعته بالخبر» حيث أصبحت 
الصورة الجيدة عملية أساسية وحيوية في حياة الصحف والمواقع الإلكترونية. 


ويزخر عالم الحاسب بالعشرات من أنواع الملفات الرسومية والصوّرية» وكل منها يختلف عن غيره من 
نواح عدة منها الدقة وعدد الألوان التي يستوعبهاء والحجم التخزيني للملف» وتتكون الصور من شبكة 
دقيقة من ال كاه×أ۴» وكل نقطة تمتل في الشبكة موقع لون معين» ويتم تخزين الصورة الرقمية بالطريقة 
ذاتها» ويمتل كل لون برقم» ويتم ضغط كل هذه الأرقام بالحجم» ويمكن ضغط الصورة بسهولة باستخدام 
أساليب مختلفة لضغط الصورة» وتعتمد المواقع والصحف الإلكترونية بصورة عامة على نوعين من 
الصور» هما صور ال (GIF‏ وصور 6 ]2 لء Laag‏ التنسيقان اللذان سبق ذكرهما في وحدات سابقة. 


ويقوم المخرج الصحفي بعملية إبراز الصورة وتحديد حجمها المناسب طبقاً لهدفه» وطبقاً لبراعته ودقته. 
ويمكنه حذف الأجزاء غير المهمة من خلال برامج معالجة الصور المستخدمة كبرنامج ال 56/010507 
الذي يعمل على إخراج صورة مشوقة وجذابة» وبصورة عامة فإن إخراج الصورة الصحفية هو تحديد 
الشكل الفني الذي ستظهر فيه الصورة الصحفية من حيث موقعها في الصفحة» وأسلوب عرضهاء 


وطريقة تقديمهاء عموماً إن تنسيق ۴۴6ل مثالي لتخزين الصور الفوتوغرافيةء لأنه صمم بشكل خاص 
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لتخزينها بفعالية» وتنسيق ۴ا6 مثالي لتخزين صور صفحة الويب» كالأشكال والرسوم البيانية والصور 
والرسوم المتحركة. 


أشكال الصور بالصحف الإلكترونية من حيث استخدامها: 


يقوم المخرج والمصمم في المواقع والصحف الإلكترونية بإخراج الصور وفق أسلوبين هما: أسلوب الصور 
الثابتة» وأسلوب الصور المتحركةء كما تأخذ الصور التي تقدمها الصحف الإلكترونية ثلاثة أشكال من 


1- الصور المعلوماتية والإخبارية: وهي التي تقدم معلومات إلى القارئ» وتتعدد أنواعها 


وتقسيماتهاء فمنها على سبيل المثال: الصور الشخصية والموضوعية والإبهامية» ومنها أيضاً 


الرسوم التوضيحية» والرسوم الساخرة. 





2- شعار الصحيفة: وهو الذي يحمل شخصية الصحيفة» ويقوم بعملية ربط بصري بين القارئ 


والصحيفة. 
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3- الصور كروابط: تستخدم الصحف هذا النوع بدلا من النصوص لتقديم شكل جمالي إلى 
المستخدم. 





مهما كانت الأنواع والأشكال» فالصور عادة ما تقوم بعدد من الوظائف هي: 


1 - الوظيفة التزيينية ©8601214107]: المتمثلة في تقديم الشكل المرئي وللتأكيد عليه. 

2- الوظيفة التصويرية |1©0165611431101023]: وتحتوي العناصر المذكورة في النص. 

3- الوظيفة التنظيمية Organizational‏ المتمثلة في تصوير العلاقات بين العناصر المذكورة 
في yall‏ 

4- الوظيفة التفسيرية ©50131036(276: المتمثلة في توضيح كيفية حدوث الأشياء. 

5- الوظيفة البصرية: للصورة دور فعال في جذب انتباه القارئ والاستحواذ عليه» ويتفق مصممو 
الصحف على أن الصورة اللافتة للنظر ربما تكون أفضل وسائل جذب عين القارئ إلى 
الصحيفةء وتعد الصورة الفوتوغرافية أفضلها في هذا الصدد إذ يمكنها تسجيل تفاصيل الأشياء 
بشكل قريب من الواقع» فضلاً عن أنها تستطيع جذب الانتباه بشكل أسرع. 
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6- الوظيفة التيبوغرافية: تمثل الصور أحد العناصر التيبوغرافية أياً كان شكلها وطريقة إخراجهاء 
وتساعد الصور في تصنيف الأخبار حسب أهميتهاء كما العناصر التيبوغرافية الأخرى؛ كما 
شتخدم في تثبيت أركان الصفحة» وإيجاد صفحة جذابة باعتبارها عنصراً تيبوغرافياً يتميز 
بالتقل. 

7- الوظيفة الاتصالية: للصورة وظيفتها الإخبارية التي تنافس بها الكلمة في الصحافة الإلكترونية 
في نقل المعلومات المطلوبة» وقد ازدادت أهمية الصور والرسوم الصحفية بعد نجاحها في 
مختلف وسائل الإعلام الأخرى» فضلاً عن أن الصورة أقدرُ على ربط مضمونها بالواقع» وأنها 
تستعمل لإشباع فضول القارئ إلى شكل الأشخاص والأماكن والأشياء. 

8- وهناك وظيفة أخرى للصور والرسوم أضفاها الإنترنت عليهاء وهي وظيفتها كرابط متشعب 
«Hyperlink‏ فالصور والرسوم على الإنترنت شتخدم لتوضيح موضوع معين» أو لتوضيح 
مضمون الصفحات في حالة استخدامها الروابط. 


بالرغم من أهمية الصورء فإن الاستخدام المبالغ 
للصور» وعدم فهم وظائف الصور والرسوم» 
وتأثيراتها على المستخدم يؤدي إلى إحداث تأثيرات 
عكسية لاستخدامهاء ومن هنا يجب أن يراعي 
المخرج عدداً من المعايير عند استخدام الصور 


والرسوم تتمثل بما يأتي: 





ع زيادة عائدات التفط: وفق ما افاد تلفزيون الإاخبا 
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1- استخدام الصور والرسوم لإكساب الصحيفة أو الموقع نوعاً من الواقعية. 
2- تجنب الصور ذات الدرجات اللونية الرمادية أو الألوان البراقة حتى لا تعطي القارئ انطباعاً 


خاطئاً عن الموضوع. 
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3- عدم المبالغة في حجم الصور على الشاشة؛ لأنها تتطلب سعات تخزينية كبيرة» وتأخذ مدة طويلة 
في التحميل على الإنترنت مما يجعل متصفح المواقع يمل منهاء ويتحول إلى موقع آخرء وتعتمد 
جودة الصورة على قوة تحديدها ١٥10ا‏ اموه ويتم قياس التحديد بعدد ال Pixels‏ في البوصة. 

4- التناسب بين حجم الصورة والمادة التحريرية التابعة لهاء وتوظيف الصورة في المكان المناسب. 

5- أن تكون الرسوم جيدة الإخراج» ويتوافر فيها عناصر الاتزان والتباين والبساطة» والتكامل مع 
الموضوع. 

6- الرسوم الخطية يجب أن تحافظ على النسب الطبيعية في الرسم بعكس رسوم الكاريكاتير. 


هو عبارة عن تصوير الأشخاص بشكل طريف 0 
‘ الإختبار wee‏ 
يجسد ملامح الشخصية الواضحة» ويبالغ في إبراز i‏ 


ما يتمیزون به من سمات» وقد يستخدم الكاريكاتير 
الكلام أو لا يستخدمه من أجل التعبير عن 
المفارقات المضحكة والجوانب الساخرة» Ja)‏ يقوم 





الملامحية أو الكوميديا في الموقف أو اللفظ 





كنماذج Lele‏ وليس كأفراد بعينهم» والرسوم بصورة عامة تخدم عدداً كبيراً من الأهداف في أي Agaly‏ 
من إعطاء المستخدمين إشارات بصرية إلى التفاعل مع الصفحةء إلى تحريض الحالات النفسية أو 
الأحاسيس أو الحالات العاطفية الأخرى» وقد تستخدم الرسوم أيضاً في هيئة رسوم رمزية بمصاحبة 
عناوين الأبواب التحريرية الثابتة» ويجب أن تأتي معبرة عن مضمون الباب ومنطوق العنوان المصاحب»› 
وأما الرسوم البيانية فتعود أهميتها إلى أنها يمكن أن تقدم كما معقداً من البيانات والأرقام قد لا يلتفت 
إليها القارئ إذا ما وضع داخل المتنء كما أنها تضع هذه الأرقام في ميزان المقارنة مع أرقام أخرى في 
أماكن وأزمنة متفاوتة. 


205 


المعايير التي تحكم وضعية الصور داخل صفحة الويب: 


إن استعمال الصور دون الارتكاز إلى أسباب علمية واعلامية وتقنية تدعم استعمالها يذهب بالمجهود 
الويب» وهذه المعايير ترتبط بنوع الصور وحجمهاء ومساحتها وموقعها على الصفحة» وهي كما يلي: 


أ- نوع الصورة: 
تتحكم دقة الصورة والألوان الموجودة بها في تحديد الصور المعروضة على الصحيفة الإلكترونية؛ 
وتقاس دقة الصورة بالبت 814 ويسمى أحياناً عمق البيكسل Pixel Depth‏ أو وضوح البت ]81 
alally «Resolution‏ بها عدد الألوان المتاحة في بيكسل الصورة المعروضة:؛ فعلى سبيل المثال 
البيكسل ذو العمق الواحد يحتوي على قيمتين هما الأسود والأبيضء والبيكسل ذو الثمانية أعماق 
يحتوي على 256 قيمة لونية» والبيكسل ذو الأربعة والعشرين بتاً يحتوي على 16.777.216 
las!‏ 

ب- حجم الصورة: 
يتحكم نوع الصور في حجمهاء فالصور من نوعية 6/5 أقل حجماً من الصور من نوعية PNG‏ 
JPEG,‏ لأنهما يحتويان على ألوان أكثرء وهناك علاقة وثيقة بين حجم الصورء وتحميل 
صفحة الويب» فكلما كانت الصفحة تحتوي على صور كبيرة الحجم أو صور كثيرة العدد زاد من 
بطء تحميل الصفحة» وهناك قاعدتان تحكمان حجم الصور: الأولى تتعلق بالصور المنفردة» 
والثانية تتعلق بحجم الصور الإجمالي في الصفحة» وبالنسبة للصور المنفردة فقد توصل 
المصممون إلى أن حجمها يجب أن يتراوح ما بين 25 و50 كيلو بايت على الرغم من اعتماد 
بعضهم على 30 أو 35 كيلو بايت» عدا عن أنها لا تظهر تفاصيل الصورة بشكل واضح» أما 
بالنسبة لحجم الصور في الصفحةء فيجب ألا يتجاوز ال 200 كيلو بايت. 
ويجب الانتباه إلى الصور الثابتة» والصور المتغيرة في الصحيفة الإلكترونية» والتقليل من الصور 
الثابتة» حتى تفسح المجال للصور المصاحبة للنصوصء ولتزيد من سرعة تحميل الصفحة. 
ae‏ مساحة الصورة: 
ويُقصد بها مساحة الصورة التي تشغلها على الصفحة؛ وتتحدد مساحة الصورة تبعاً للمعلومات 
التي تحتويها الصورة» فإذا كانت تفاصيل الصورة كبيرة تطلّبت زيادة مساحتهاء وقد توصل 
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الباحثون إلى 25.000 بيكسل مربع كمساحة مثالية للصورة» وتخضع مساحة الصورة إلى نوع 
الصورة» فالصورة الشخصية مساحتها صغيرة وتأخذ شكلا رأسياًء والصورة الموضوعية (تجسد 
حدثاً معيناً) تشغل مساحة أكبر وتأخذ شكلاً أفقياً» أما الصورة الإبهامية (بحجم الإبهام) فلا تركن 
لمساحة أو شكل معين» فيمكن أن تكون دائرية أو شبه دائريةء أو مستطيلة أو مربعة الشكل. 

د- موقع الصورة: 

يُجمع الباحثون على أن الموقع الأفضل بالنسبة للصور وضعها في اتجاه اللغة» وأن لا تقطع 
النص حتى لا تقطع استمرارية قراءته» ولا توضع في نهاية النص» وقد رأى باحثون آخرون 
ضرورة وضعها في الجزء الأيمن من الصفحة حتى لا تقطع استمرارية النصء ولا توضع في 
نهايته لعدم سحب الانتباه من النص أو شغل بصر القارئ بالنص والصورة معاًء بينما رأى 
آخرون أن وضعها بين العنوان والنص أمر مناسب أكثر لتعطي الصورة فكرة كاملة عن الموضوع 
قبل البدء بالقراءة» ولأن الصورة مكملة للنص وهي جزءٌ منه» ولتؤديَ إلى كسر النمطية في 
عرض الصورء ويطرح باحثون فكرة وضع الصورة God‏ العنوان حتى تقود القارئ بما تملكه من 
قوة جذب إلى قراءة النص. 


رابعاً: الألوان 
وظائف الألوان في الصحيفة أو الموقع الالكتروني: 


1- التمييز بين العناصر المختلفة باستخدام لون مميز لكل فئة من العناصر. 

2- تحقيق التباين بين الخطوط الموجودة في الصفحة. 

3- الإسراع في عملية البحث داخل النص الطويل» وذلك بتمييز بعض الكلمات المفتاحية 
بالألوان. 

4- إعطاء القارئ إيحاءات ومعاني معينة للعناصر نظراً للتأثيرات النفسية التي تحدثها الألوان 
على عين القارئ» ونظراً للتأثيرات الفيزيولوجية على العين البشرية. 

5- إيجاد الإحساس بالوحدة للصفحة ككل» ولبعض الموضوعات داخل الصفحة باستخدام 
ألوان محددة لكل منها. 

6- إعطاء الصفحة أو الموقع الهوية البصرية أو الملامح الأساسية. 
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المعايير التي يجب الالتزام بها عند اختيار الألوان: 
هناك مجموعة من المعايير التي يجب الالتزام بها عند اختيار الألوان منها: 


1- استخدام الألوان الهادئة» وتجنب نقص التباين لتفادي إرهاق عين القارئ وإزعاجه. 

2- استخدام ألوان محددة غير صارخةء وتجنب الألوان الفاتحة جداً؛ لأن الألوان هي التي تميز 
شخصية الصفحة وترسمهاء علماً أن الألوان القوية الصارخة تؤدي إلى بطء تحميل الصفحة 
والى حدوث الزيّغ اللوني. 

3- عدم استخدام ألوان كثيرة متجاورة مما يسبب التراكم في الألوان» وتشويه الصفحة. 

4- تجنب تجاور الألوان المتعارضة مثل اللون الأخضر والأزرق؛ لأن العين البشرية لن تميز 
درجات تلك الألوان بشكل صحيح. 

5- تجنب حالات العمى اللوني عند توظيف اللون» والذي يحدث في حالة النظر إلى شاشة 
الكمبيوتر في الضوء المنخفض. 


208 


خاتمه: 
تعتمد الصحافة الإلكترونية في تكوينها وتصميمها على مجموعة من العناصر التيبوغرافية التقليدية, 
كالنصوص والصورء والألوان والفواصل» ويستفيد المصمم في الصحيفة الإلكترونية من بيئة الإنترنت 
التي تسمح بالاستفادة القصوى من كل هذه العناصر ومكوناتها بشكل أفضل وأكثر تنوعاً مثل: 
« الاستفادة من أنواع الخطوط وأحجامها وطرق إبرازها للتأكيد على النصوص» وعرضها بالشكل 
الذي يحقق وصولها بشكل سهل وسريع للمستخدم. 
« الاستفادة من إبراز العناوين وتوظيفها بالشكل الأمثل الذي يخدم عرض النص وتوضيحَ أهدافه 
والتعبير عنه. 
« الاستفادة من الجداول والإطارات كفواصل للموضوعات Jala‏ الصفحة وفواصل بين الصفحات. 
« الاستفادة من إمكانيات أجهزة الحاسب والإنترنت في دعم الملايين من التدرجات اللونية التي 
سمحت للمصمم توظيقها بشكل دقيق في تقديم الموضوعات والصفحات وفقاً لدلالات الألوان 
وتأثيراتها النفسية على المستخدمين. 
لكن العناصر البنائية الأكثر تميزاً والتي تعتمد عليها الصحافة الإلكترونية في تكوينهاء فهي العناصر 
التكنولوجية» والمتمثلة في عناصر الوسائط المتعددة من نصوص ومقاطع فيديو» ومقاطع صوتية» ورسوم 


متحركة» ونصوص تشعبية» وغيرها من العناصر› وهو ما ستتعرضص له الوحدة القادمة. 
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a 


الخلاصه 


يذهب بعض الباحثين إلى أن الصحافة الإلكترونية هي الامتداد التكنولوجي للصحافة التقليدية» وبالتالي 
فإن بناء هذه الصحافة تأسس أصلاً على العناصر التقليدية التي بُنيت عليها الصحافة التقليدية» وهي 
العناصر نفسها التي لا تختلف في وظائفها وخصائصها التي تحملهاء لكنها تتميز في البيئة الإلكترونية 
بإمكانيات وسهولة ومرونة أكبر في الاستخدام» وقدرة على التوظيف لتحقيق الاستفادة القصوى من 
الميزات التي تتمتع بهاء بحيث تجعل من تصميم الصحيفة الإلكترونية عملية أكثر فعالية من الناحية 
الشكلية والوظيفية في ظل تنافس كبير في بيئة هذه الصحافة. 


i Wk ee Atel ga pain Sh, gate a,‏ الستامس الي ال رة 
وهي النصوص وما تحويه من خطوط وحروف» وعناوين ومقدمات» والجداول والفواصل» أما الصنف 
الثاني فهو العناصر البنائية الغرافيكية» وتشمل الصور والرسوم الثابتة والألوان» وهي العناصر المساعدة 
للعناصر التيبوغرافيةء لكنها تحمل الأهمية نفسهاء وتعمل على تقديم الصحيفة بشكل ممتع وجذاب» ومن 
عل اا ر ف قل اخسن إلى قاف ا ا اداس کا قر کي 
القواعد التي تحكم آلية توظيفها واستخدامهاء لكنهم في البيئة الإلكترونية امتلكوا الإمكانيات التقنية الأكبر 
التي تجعلهم يقدمون النصوص بخطوطها المتعددة الأنواع وعناوينها المتنوعة» ومقدماتها الضرورية 
بشكل جذاب ومفيد أكثرء واستخدموا الجداول والفواصل لتنظيم المواد النصية وغيرها من العناصرء 
وتحديد العلاقات بينها بالطرق التقليدية والتكنولوجيةء كما قدموا بالاعتماد على إمكانيات الحاسب الآليء 
وعلى البرامج التطبيقية المختلفة تنوعات كثيرة وواضحة المعالم والتفاصيل من الصور والرسوم» وملايين 

من التدرجات الواضحة والجذابة من الألوان. 
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اختر الإجابة الصحيحة: 


1. ليست من العناصر التيبوغرافية التقليدية: 
«A‏ التصضوصن. 

Tdi parai 

C‏ الفواضل. 

0. الألوان. 


الإجابة الصحيحة: 8 النصوص المتشعبة 


. من وظائف الصور كإحدى العناصر المهمة في تصميم الصحافة الإلكترونية: 
Pie een‏ 

. الوظيفة التزيينية. 

. الوظيفة الإخبارية. 

„glaa (B) s (A) . 


m o O 06 > دم‎ 


213 


حجم الصور الثابتة التي يجب أن تُعرض في الصحيفة الإلكترونية يتراوح بين 25 إلى 50 كيلوبايت. 


هه 
8. خطأ 


الإجابة الصحيحة: / صح 


3. الخطوط التزيينية المزخرفة من أفضل أنواع الخطوط المستخدمة في النصوص لإضفاء الجمالية 
على النص. 


۸. صح 


8. خطأ 


الإجابة الصحيحة: 8 خطأ 
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الوحدة التعليمية العاشرة 


عناصر تصميم الصحيفة الإلكترونية - العناصر التكنولوجية 


الأهداف التعليمية: 
بعد دراسة هذه الوحدة التعليمية يجب أن يكون الطالب قادراً على أن: 


1. يحدد العناصر التكنولوجية في تصميم الصحافة الإلكترونية. 
2. يشرح الرسوم المتحركة. 

3. يشرح مقاطع الفيديو. 

4. يشرح المقاطع الصوتية. 

5. يشرح النص المتشعب: 


العناصر 


عناصو تصميم :الضحافة الإلكترودية: 
o‏ الوسائط المتعددة 
ف اسي اة 
© مقاطع الفيديو. 
ف الفقاظع الصرقية. 
© النص المتشعب. 


5 


خاتمة. 
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الكلمات المفتاحية: الصحافة الإلكترونية - العناصر التكنولوجية - الوسائط المتعددة - الرسوم 
المتحركة - رسوم ال 6I۴‏ - رسوم ال 8۷۷۴ - المقاطع الصوتية - الموجات التماثلية - الصوت 
الرقمي- النص القيادي - مقاطع الفيديو - ملفات VFW J auk — Quick Time J‏ — ملفات ال 
atti MPEG‏ د الت الاق التصن الناشعب - كتير etl‏ تر الل cade)‏ = 
النص المتشعب الداخلي - النص المتشعب الخارجي - النص المتشعب المحلي - النص المتشعب 
والقوى الفاعلة - النص المتشعب والقائم بالاتصال - الروابط التشعبية الغرافيكية - الروابط التشعبية 
ا 


0 
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أولاً: مقدمة 





يجمع مصطلح الوسائط المتعددة كلآ من الرسوم والصوت 
الرقمي» ومقاطع الفيديو» والنصوص التشعبية بشكل نا لين 


أساسيء وقد تم استخدامها لدعم الوسائط التقليدية من 





نصوص وصور. ويُجمع الدارسون على أهمية استخدام 
a‏ المتفدةة فى Cig)’ Spas balay‏ والفيديو: 
Sl (cutee gal,‏ فل کے heal‏ ا نے 
المحتوى المعلوماتي؛ وإضفاء نوع من الواقعية على هذه 
المح اكه داك هخا غطاء الصف الاحساين 





بالحيوية والديناميكية التي توفرها هذه الوسائل» ويشيرون إلى أن المبالغة في استخدامها قد يؤدي إلى 
نتائج عكسية تدفع المستخدم إلى الهروب إلى مواقع وصفحات أخرى ولاسيما أن ملفات هذه العناصر في 


الغالب تكون كبيرة» مما يؤدي إلى بطء تحميل هذه الصفحات. 


في هذه الوحدة سيتم التعرض للوسائط المتعددة» وهي العناصر التكنولوجية التي خرجت من بيئة 
الإنترنت» ووظفها المصممون لتقديم الصحف الإلكترونية بشكل جذاب وسهل الوصول بالنسبة إلى 
المستخدم» ومن ضمن هذه العناصر: الرسوم المتحركة» والمقاطع الصوتية الرقمية» ومقاطع الفيديوء 


وأخيراً النص المتشعب أو الفائق» وهو الجزء الأساسي والمهم في حزمة هذه الوسائط. 


ثانياً: العناصر البنائية التكنولوجية (الوسائط المتعددة) 
بدايات الوسائط المتعددة في العملية الإعلامية: 


ارتبط مفهوم الوسائط المتعددة بداية بتطور حركة الوسائل التعليمية واستخدامها في التعليم» وذلك مع 
شيوع استخدام أجهزة عرض الأفلام الثابتة والشفافيات والشرائح مصحوبة بالتسجيلات الصوتية» والتي 
تمثلت Audio-Visual ipad) iwal Klug alaiul aggin‏ في التعليم» وكان الهدف الأساسي 
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من استخدام هذه الوسائل إثارة الدافعية للتعليم والتعلم» والعمل على استثارة الحواس جميعها لاستكمال 
المعنى أو بناثه أحياناً» ولتأكيد بعض المعاني والدلالات لبعض المعلومات المتضمنة في الكتب والمناهج 


الدراسية والأكاديمية. 


وقد تجلت الوسائط أو الوسائل Multimedia saseid)‏ 4 أشكال إعلامية كثيرة» كالأفلام الصامتة؛ 
والتي قد يرافقها أحياناً صوت تعليق صوتيء والناطقة بأصوات الفنانين والممثلين» أو حتى في حكايات 
صندوق الدنيا الذي يقتصر على عرض الصور الثابتة مع شرح صاحب الصندوق لحكاية الصورء كما 
تجلت في الكثير من الأفلام التعليمية والصحية والإرشادية الصامتة والناطقة أحياناً» وكل هذه الوسائل 
ساهمت في فترة من الفترات في استثارة دافعية المشاهدين والطلاب للمشاهدة والتعلم» وتوجيه الإدراك 
نحو المعاني التي لم تستطع الكلمة النصية أو حتى الصورة أحياناً وحدها أن تبني أو تعطي هذه الدلالة؛ 
وهذه كانت بدايات أو إرهاصات الوسائط المتعددة في العملية الإعلامية فيما بعد. 


مفهوم الوسائط المتعددة: 


تقوم الوسائط المتعددة إذاً على دمج النصوص والرسوم والصور الثابتة والمتحركة بالأصوات والتأثيراء” 
المختلفة لتوصيل المعاني والأفكار أو لتأكيدهاء ويرى الباحثون في هذا المجال أنه يمكن للوسائط 
المتعددة وبفضل ما تتوافر فيها من سمات وخصائص تفاعلية أن تحسّن الاتصال» وتثري المواد المقدمة 
عبرهاء ويؤكدون أنها تساهم في توفير بيئة متميزة تساعد مستخدمي الإنترنت عموماً على اكتساب 
المهارات والخبرات والمعرفة» وذلك من خلال التفاعل مع النصوص الجامدة المتضمنة للقطات مسموعة 
أو مرئية» وصورٌ ورسوم كاريكاتورية أحياناً. 

ويذكر الباحثون تعاريف مختلفة للوسائط المتعددة» كلها تركز على أنها 'ترتكز بشكل أساسي على النص 
مصحوباً بالصوت واللقطات الحية من فيديو وصورة وصوت وتأثيرات خاصة»ء مما يزيد من قوة وخبرة 
المتلقي aly‏ كلفة ووقت"» أي أن الوسائط المتعددة من الناحية الشكلية تعني التكامل بين أكثر من 


وسيلة» نص مكتوب مع مقطع صوتي مع صورة ثابتة أو متحركة. 
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فوائد الوسائط المتعددة في المواقع الإعلامية: 


تقدم المواقع الإعلامية على شبكة الإنترنت - في الوقت الحالي - الكلمة المكتوبة والمقطع الصوتي 
والصورة الثابتة ومقطع الفيديو في إطار زمني واحدء فتقدم بذلك إمكانية المشاهدة أو القراءة أو الاستماع؛ 
فتجمع بذلك خصائص عمليات التعرض هذه» وتدعم العمليات المعرفية التي كانت تدعمها بشكل منفردء 
كما تضفي على العمل الإخراجي قيماً جمالية تجعل الصفحة تتنوع بين المواد السمعية والبصريةء وقيماً 
نفعية تتمثل في إمداد المخرج بعناصر أخرى مساعدة للعناصر التقليدية لبناء الصحيفة أو الموقع 
الإلكتروني للتعبير عن المضمون بدقة أكبرء وهو ما يطلق عليه الوسائط المتعددة» والتي سيتم 
استعراضها فيما يلي: 


أولاً: الرسوم المتحركة 


هي سلسلة من الإطارات الثابتة التي تمثل كل منها لقطة» وثعرض اللقطات أو الإطارات بسرعة 24 
إطاراً في الثانية» فتوحي للمشاهد بالحركةء فالرسوم المتحركة إذاً هي محاكاة للواقع والحركة فيه» ويمكن 
أن تنشأ عن طريق الحاسب من دون تقليد الحركة من خلال إجراء تغيرات في اللون أو الإضاءة بين 
إطارات الصورة المتحركة» وهي أسلوب عمل حركة خادعة عن طريق استعراض سلسلة من الصور 
المختلفة تمر بسرعة فائقة خادعة العين عن طريق ما يسمى بالخداع البصريء وذلك برؤية الصور 
åS jaia‏ معتمدة في ذلك على نظرية الرؤيةء إذ تحتفظ شبكة العين بالصورة لمدة 10/1 من الثانية بعد 


زوال الصورة الفعلية. 
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تصميم الرسوم المتحركة: 
ويُستخدم في تصميم الرسوم المتحركة على الإنترنت العديد من لغات البرمجة والبرامج التطبيقية التي 
تتيح لمصمم الصفحة تدعيمها بالرسوم المتحركة» «Shockwave gays Quick Time igal Jia‏ 
لا تدعم مستعرضات الويب كل هذه البرامج» وعندها تحتاج إلى برامج أخرى لتشغيلها ودعمهاء مما يؤدي 
إلى شغل مساحة كبيرة على الصفحةء ويؤدي إلى ملل المستخدم وهروبه من الصفحة» ولكي يتلافى 
المصمم هذه المشكلة يقوم: 

o‏ بتحديد أهداف استخدامه لهذه اللغة وهذه البرامج. 

ه استخدام الرسوم بقدر معين ولاسيما أن الصحيفة الإلكترونية لا تعتمد كثيراً على الرسوم في 


موادها الإخبارية» ويتم الاعتماد عليها أكثر في تصميم الإعلانات. 


أنواع الرسوم المتحركة: 


تتنوع الرسوم المتحركة المعروضة في الصحافة 
الإلكترونية سواء: 

o‏ من ناحية الظهور على الصفحة. 

o‏ من حيث أنواع الملفات التي تشغلها. 


ه من حيث الوظائف التي تقدمها. 





من حيث الظهور فإن الرسوم المتحركة تكون على شكلين: 


1- الرسوم المتحركة الديناميكية: وهي الرسوم غير الثابتة والمتغيرة من عدد إلى آخرء وبصفة عامة 


تستخدمها الصحف الإلكترونية لتحقيق ما يلي: 
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أ- عرض العناوين الإخبارية والموضوعات في الصفحات. 

ب- عرض مجموعة من الصور المتتابعة عن حدث معينء» مثل استخدامها في عرض صور 
المرشحين لانتخابات معينة أو عرض لاعبي قرة القدم. 

ت-جذب الانتباه عبر استغلال حركة الصور والعناوين. 

2 -الرسوم المتحركة الثابتة: وهي الرسوم التي لا تتغير في الصحيفةء والتي تميز شخصية الموقع 

أو الصحيفة الإلكترونية» ويحقق هذا الشكل من الرسوم عدداً من الوظائف منها: 

أ- ثبات شخصية الصحيفة على الشبكة عن طريق تميز موقعها برسم معين يميزها عن غيرها 
من بقية الصحف والمواقع الإلكترونية. 

ب-جذب انتباه القارئ للصحيفة. 

ت-المساعدة على التذكر» وايجاد انطباع معين لدى القارئ. 

ث- تحقيق التوازن بين أجزاء الصفحة» ومع العناصر الثقيلة مثل: العناوين - الرسوم - الصور 
- الجداول. 


من حيث الوظائف التي تساعد في تحقيقها: 
هناك في هذا الخصوص مجموعة من الرسوم المتحركة منها: 
1- إضفاء خاصية الرسوم المتحركة Character‏ 
7 أي إعطاء الساكن أو الثابت حركة واقعية 
مثل أن تجعل شخصاً يمشي» أو ترسم ضحكة أو ابتسامة 


على وجه معين. 
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2- التركيز أو إضفاء البريق ne Highlights and‏ = 
95 م مثل إدخال كلمة على الشاشة ثم MICRO SYRA‏ 
إخراجهاء أو تكبيرها وتصغيرهاء وإضفاء ألوان . ١‏ 

sui! yf ا‎ 





تحريك النصوص a, :Moving Text‏ كتابة 
نص معين على الشاشة؛ واضافة مؤثرات بصرية 
عليه» مثل أن تظهر الكلمة بشكل أحرف 
منفصلة مثل الآلة الكاتبة» أو عمل زحف للنص 
من اليمين إلى اليسارء أو عمل انقسام أفقي أو 

عمودي إلى الداخل أو الخارج. 


أما من حيث أنواع الملفات التي تشغلها الرسوم المتحركة في الصحف والمواقع الإلكترونيةء فيوجد 


نوعان من هذه الرسوم: 
الأول تقنية الرسوم المتحركة من نوعية ال „GIF‏ 


والثاني تقنية الرسوم المتحركة من نوعية ال SWF‏ ولكل نوع من هذه الأنواع ميزاته وخصائصهء 
واستخداماته المختلفة في التصميم: 

1- تقنية الرسوم المتحركة Graphic Interchange Format‏ (۴ا6G):‏ وتعتمد ھذہ التقنية على 
عدد الإطارات (الصور) التي تمر في الثانية الواحدة» ويحتوي كل إطار على فكرة جديدة في 
الشكل والمضمون» وكلما زاد عدد الإطارات زادت سرعة الرسوم المتحركة من جهة؛ وزاد حجم 
الملفات من جهة ثانية. 
وتتميز هذه النوعية من الرسوم» بميزات عدة: 


1. تدعم هذه الرسوم أغلب مستعرضات الويب. 
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2. صغر حجم ملفات هذه الرسوم. 
3. سرعة تحميلها على صفحة الإنترنت. 

2- تقنية الرسوم المتحركة ها۴ cay :(SWF) Shockwave‏ من أهم وسائل إغناء الويب» 
لاعتمادها طرائق مبتكرة في إعداد العروض التفاعلية التي تتيح التفاعل مع المستخدم» والانتقال 
بحرية بين عناصر العرض» وإضافة المعلومات التي يرغب المشاركة بهاء وغيرها من أشكال 
التفاعل مع المادة» وثبنى العروض التفاعلية المبنية على تقنية ال 11351١‏ على عناصر أساسية: 
1. مسرح الحدث: وهو المساحة المرئية من صفحة الموقع التي ستجري فيها أحداث العرض. 
2. التسلسل الزمني للعرض: وهو المسار الزمني لتعاقب أحداث العرضء والتي يتم ترتيبها من 

خلال الصفات الزمنية للإطارات. 
3. الطبقات: وتسمح هذه التقنية بتمثيل الأحداث في طبقات متراكبة وشفافة بحيث تجري 


مجموعة من الأحداث في زمن واحد وعلى مسرح أحداث مشترك. 


قواعد استخدام الرسوم المتحركة: 

بالرغم من أهمية الرسوم المتحركة المستخدمة في تصميم 
الصحيفة الإلكترونية» وتأثيرها في إضفاء الجمال والجاذبية 
للموقع» فاستخدامها - كما سبق ذكره - يجب أن يكون بقدرء 
فهي في النهاية ليست عنصراً مساعداً لعرض الرسالة 
الإعلامية بل إن لها استخداماتِ أخرى على الصفحةء 
كتصميم الإعلانات مثلا» ويؤكد المصممون على مجموعة من 
المحاذير التي يجب الانتباه إليها عند التعامل مع الرسوم 
المتحركة» ومنها: 





عدم وضع الرسوم المتحركة في منتصف الصفحةء حتى لا تؤثر على مجال رؤية المستخدم» وقراءته 
امو ان ا GS ct dale‏ 
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1- يجب ألا توضع هذه الرسوم في مناطق الاهتمام العالية» مثل الجزء العلوي الأيمن من الصفحة 
Sus‏ الست السا Asad‏ 

2- إذا كانت الرسوم المستخدمة على شكل أيقونات أو صور صغيرة» فيفضل استخدام رسوم ال 
.GIF‏ 


ثانياً: المقاطع الصوتية الرقمية 

يُعرّف الصوت من الناحية الفيزيائية بأنه تخلخل في 
الهواء يحدث للذبذبات الصوتية ينتج عنه موجات» 
يدركها الإنسان على أنها صوت» وتطآّق كلمة 
الصوت على الموجات الصوتية عامة في النظام 


الرقمي» وتتكون هذه الموجات من عنصري: 





« الاتساع وهو المسافة بين خط المنتصف (الصمت) والخط الأعلى (الصوت العالي) والخط 
الأسفل (الصوت المنخفض) لذروة الموجة. 

o‏ أما العنصر الثاني فهو: التردد أي سرعة حركة الموجة الصوتية (عدد الموجات التي تمر في 
الثانية الواحدة)» وبالطبع فإن الموجات السريعة تعطي إيقاعاً سريعاًء والموجات البطيئة تعطي 
إيقاعاً بطيئاً. 

Analog Abha ملفات الصوت‎ clint, 
للتحويل إلى ملفات الصوت الرقمية»‎ 95 
ويتم ذلك من خلال قيام المصمم بأخذ مقاسات‎ 
لاتساع الموجة عند نقطة محددة من الزمن» وكل‎ 
مقياس يؤخذ يسمى العينة» وعملية تحويل الصوت‎ 


التمائلي إلى رقمي تسمى معاينة الصوت te‏ 


© سد ب بج ين جه ا عدا يد ه‎ as 





204 


ويدرك المصمم أنه لن يصل إلى دقة ووضوح الصوت الأصليء لكن يمكن الاقتراب منه من خلال زيادة 
عدد العينات التي تؤخذ في الثانية وقيم اتساعهاء ويتم تحويل الصوت التمائلي إلى صوت رقميء إما عن 
طريق قناة أحادية 1000ء أو قناة ثنائية (مجسمة) Stereo‏ والصوت المجسم أكبر من الصوت 
الأحادي» ويشغل ضعف مساحته. 


أنواع الصوت في المواقع والصحف الإلكترونية: 
يمكن تقسيم الصوت في المواقع والصحف الإلكترونية إلى نوعين: 
1- التعليق الصوتي الذي يُستخدم في وصف وتفسير وجذب الانتباه إلى العناصر البصرية» 
والرسومات والفيديو على الصحيفة. 


2- الموسيقا والمؤثرات الصوتية المعبرة عن مواقف مختلفة لإضفاء الواقعية والإحساس بالأحداث 
والأماكن» وتحسين العملية التفاعليةء وجذب الانتباه. 


المجالات التي يُستخدم فيها الصوت في الصحف الإلكترونية: 
من المجالات التي يُستخدم فيها الصوت في الصحف الإلكترونية ما يلي: 
1- التنبيه على أخطاء وقع فيها المستخدم» كإصدار جرس لتنبيه المستخدم لضغطه على وصلة 
2- تنبيه المستخدم إلى موضوع مهم أو تحذير فوري» وهو مشابه للصوت السابق لكن يصاحبه 
تعليق مكتوب على الشاشة. 
3- يتم إضافة التعليقات الصوتية لتجنب النصوص المكتوبة الطويلة. 
4- إقناع المستخدم بالموضوع عن طريق المؤثرات الصوتية. 
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أنواع ملفات الصوت: 


تخزن ملفات الصوت في الحاسب على هيئة أنواع 9 
مختلفة من ملفات الصوتء وكل نوع من هذه الأنواع a‏ 
يختلف من حيث الحجم الذي يشغله» ومن حيث دقة MP3‏ 


نقله للصوت الأصلي» ومن هذه الملفات: 
wi Creal‏ 


1- ملفات SND y AU‏ وهما من أقدم أنواع ملفات الصوتء؛ وتتصف بكبر حجم ملفاتها. 

2- ملفات ال Cuts! a, :(Wave) Wave Form‏ هذه الملفات من قبل مايكروسوفت. 

3- ملفات ال (WMA) Windows Microsoft Audio‏ قد أنشئت هذه الملفات من قبل 
مايكروسوفت أيضاً. 

„Real Networks Jä cya olill oda ciii :(RA) Real Audio J otk -4 


5- ملفات ال «(MP3 MP4‏ و MP2‏ و A۴‏ وا« وھذہ الملفات تعمل علی Win amp Jida‏ 


وكل هذه الملفات يمكن أن تعمل على المستعرضات الحديثةء إما عن طريق التشغيل المباشر |١‏ ٤اأا8»‏ 
أو يمكن أن تعمل من خلال „Plug In gÍ oha‏ 


لاستخدام الصوت في الصحف أو المواقع 
الإلكترونية» يذكر: 
1-يجب أن يكون الصوت is‏ مع 
لر لاا 





2- عدم الإسراف في استخدام الرموز ۰ 


او 
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3- تمكين المستخدم من التحكم في إلغاء الرسائل اللفظية متى أراد. 
4- تجنب استخدام ألحان متقاربة حتى لا يتداخل معناها على المستخدم. 


ثالثاً: مقاطع الفيديو 


تعد مقاطع الفيديو من أهم العناصر التكنولوجية 
المستخدمة في الصحيفة أو الموقع الإلكترونيء 
فهي تجسد Glas)‏ وتُشعر المستخدم أنه يتعايش 
مع الواقع ومفرداته» لكن مشكلة مقاطع الفيديو 
تكمن في بطء الاتصال» 





وكبر حجم الملفات» وان كانت التطورات اللاحقة أوصلت سرعة ملفات الفيديو إلى سرعة البث المباشر 
التلفزيوني. 
وثمة نقطتان تخصان ملفات الفيديو: 

« الأولى تتعلق بالصوت ودرجة نقائه وحجمه ومعاينته. 


وتتشابه ملفات الفيديو الذي يقدم في التلفزيون مع ملفات الفيديو التي عرض على الإنترنت» من حيث 
اعتمادهما على فكرة الإطارات» ويختلفان من حيث عددهاء فالكمبيوتر يعرض الصورة بطريقة تتابعية 
Sequence‏ بينما يعرض التلفزيون 50 صورة في 25 إطاراً في الثانية الواحدة. 

فالصور المتحركة على الإنترنت إذاً ليست إلا صوراً ثابتة متعاقبة العرض خلال فترة زمنيةء مما يؤدي 
إلى الشعور بالحركة» ويتم عرض اللقطات بسرعة 24 إطاراً في الثانية. 
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العوامل التي تتحكم بدقة مقاطع الفيديو المنشورة على صفحة الويب: 
هناك العديد من العوامل التي تتحكم بدقة مقاطع الفيديو المنشورة على صفحة الويب» منها: 


1 - معدل الإطار: 
ويقصد به عدد الإطارات المعروضة في الثانية الواحدة» وكلما زاد عدد الإطارات المعروضة في 
الثانية زادت جودة الصور المعروضة وزاد حجم الملفات» ولحل هذه المشكلة يجب ألا يتجاوز 
عدد الإطارات خمسة عشر إطاراً في الثانية الواحدة» ولا يقل عن عشر إطارات لكي لا تقل جودة 
اة امع 

2- مستوى الإطار: 
ويُقصد بها دقة الإطارات أي عدد البيكسلات المعروضة على الشاشة من الفيديو» ويرى 
المصممون أن لا تزيد مساحة ملف الفيديو عن 240 بيكسل عرضاً × 180 بيكسل ارتفاعاًء 
مما يؤدي إلى بطء التحميل» ولا تقل عن 160 عرضاً × 120 ارتفاعاًء مما يؤدي إلى عدم 
وضوح الصورة. 

3- عمق الألوان: 
يؤثر عمق الألوان في جودة الصورة» ويتدرج عمق الألوان من أحادي الألوان (أبيض وأسود) إلى 
2 بت» ويخضع عمق الألوان وفقاً للمنظر المراد إبرازه» ولا بد من استخدام أعلى عمق للألوان 
إذا ما كان المشهد يتناول حدثاً دقيق التفاصيل؛ مثل: التصوير تحت سطح الماءء أو في أعماق 
الخلاياء أو داخل نواة الذرة. 

4- حساب الضغط: 
يؤثر حجم الضغط المستخدم في جودة ملفات الفيديو» والضغط ضروري لملفات الفيديو حتى 
يصغر حجم الملف ويسهل تحميله على الإنترنت» ودقيقة واحدة من دون ضغط يصل عدد 
الصور فيها إلى نحو 600 صورة؛ فضلاً عن الصوت المرافقء مما يعني أنها تحتاج إلى وقت 
أطول للتحميل»ء ولحل هذه المشكلة تلجأ صفحات الويب إلى استخدام الضغط والفك ‘Codec‏ 


وتقوم هذه التقنية على تقليل عدد الإطارات المعروضة أو تقليل عمق الألوان. 
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أنواع ملفات الفيديو: 
تتعدد أنواع ملفات الفيديو التي يمكن عرضها على الإنترنت» ومن أشهرها: 
1- ملفات ال ©1120 >اوألا: وقد طورت هذه 


Apple Spå aiki‏ لكي تتوافق مع 
أجهزتها المعروفة «Macintosh‏ 





QuickTime 
و 0۷ء وهذه الملفات تتميز بقابليتها للضغط والفك بسرعة كبيرة.‎ ۵١ وتنتهي ملفاتها بامتداد‎ 
(VFWVideo for ) 2-ملفات ال‎ 
ورت هذه الملفات من قبل‎ :Windows 
VFW alates alae (git, «Microsoft 4s )4 
۷ء لکن هذه الملفات تتصف بکبر‎ 
Video For Windows کیا و اعا لخاد خط رنه‎ 
الملفات.‎ 





(MPEG) Moving Picture 3-ملفات ال‎ 

Auld o justi, :Experts Group 

Lal‏ تعرض صوراً عالية الجودةء لكنها 
كبيرة الحجم. 
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طرق تقديم ملفات الفيديو: 
تقدم مقاطع الفيديو في Casual]‏ والمواقع 


You E الإلكترونية بطريقتين:‎ 


o‏ التحميل Download‏ على جهاز العميل 
ثم تشغيله بعد ذلك. 








o‏ البث المباشر 51162317170 لكنها تتصف: 


O‏ بعدم دقة صور ملفات الفيديو. 





0 عدم وضوح صوتها. 


© اختفاء وظهور الصورة في أثناء التشغيل وتقطيع الصوت والصورة وغيابهما لمدة Ais‏ 
وتتوقف على سرعة الخط. 
أما التحميل فيعيبه الوقت الطويل الذي يستغرقه تحميل الملفات» وعدم 
صبر المستخدم» فعرض ملف فيديو مدته دقيقة واحدة يستغرق خمس 
دقائق للتحميل باستخدام مودم سرعته 56 كيلو بايت. 
وهناك مجموعة من الضوابط الواجب مراعاتها عند إعداد لقطات الفيديو 


وهي: 





1 - يجب أن تكون ملفات الفيديو قليلة الحجم حتى تُحمّل بسرعة. 
2- يجب أن تقدم مع الموضوعات النادرة وغير المتكررة» أو تلك التي لها مسحة تاريخية يندر 
وجودها. 


3- يجب أن تتمتع بالجودة المرئية» ولا يشوبها التشويش. 
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Hypertext (ül) yedili Gail! lel) 
aa a aa a يعد‎ 
الفائقة وشكلاً من أشكالهاء وهي مجموعة من عقد‎ 
(مجموعات) النصوص والصور والصوت» مرتبطة‎ 
على‎ Lin بوصلات إلكترونية» لتشكل نظاماً‎ 
الحاسب» وينتقل المستخدم من عقدة إلى أخرى إما‎ 
باتباع الوصلات القائمةء أو إنشاء وصلات جديدة‎ 
ويمكن الاستدلال على هذه الروابط من خلال‎ 
ll Hot Points الأزرارء أو النقاط الساخنة‎ 





تميّز إما بلون مختلف أو بخط مائل. i a seo x‏ ا س 


تعود فكرة النص المتشعب إلى ١1615007‏ 180 في الستينيات» والتي كانت نهاية مجموعة من الأفكار 
التي حاولت تجميع النتاج الفكري العالمي وتنظيمّه بحيث يسمح للراغبين بالحصول عليه بسهولة ويسرء 
Memex JI Vannevar Buch 46‏ والتي سعت إلى إنشاء نظام معلومات شخصي تسمح باختزان 
الكتب والسجلات والمراسلات» وتساعد في سرعة ومرونة الاسترجاع» ولكن الوصول إلى هذه المعلومات 
عن طريق الوصلات والروابط كان أمراً مستحيلاً. 

والنص المتشعب يحاكي طريقة تفكير المخ البشريء فالأفكار في ذهن الإنسان ليست وحدات منفصلة» 
إلى الحديث الأصليء وقد لا aill Nelson ajeg cag‏ المتشعب بأنه: "الكتابة غير الخطية والتي 
يتفرع من خلالها النص سامحاً للقارئ بالاختيار» ببساطة إنه سلسلة من نصوص كثيرة ومتشابكة عن 


طريق روابط تعرض للقارئ مساراتِ مختلفة". 
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ł 


وقد أضاف النص المتشعب للإخراج الصحفي 58588 


الإلكتروني مساحات لا محدودة من المساحات ee‏ = : 
nx‏ 


الافتراضية ومن المسارات التي يمكن أن يسلكها ey aay‏ 
الیک a D ON EE E‏ 
dis‏ رغباته وحاجاته؛ وتبرز الحاجة إلى النص كك - 
zE‏ 





المتشعب وتقسيم النص على شاشات مختلفة؛ لأن 





المستخدم يفقد نحو %25 من تركيزه عند القراءة 
من شاشة الكمبيوترء كما أن الكتابة السردية الطويلة لم تعد تلائم التطورات المتلاحقة في الأحداث» 
والتحديث المستمر للأخبار يتم بسهولة أكثر عندما يتم تقسيم النصء وربطه بروابط» فالنص المتشعب 
يعتمد على: Links Llyd (Nodes odad‏ وترتبط هذه الوصلات بوصلات أخرى عن طريق 


الروابط التي يمكن أن تكون ثنائية الاتجاه» كما يمكن أن تكون هرمية من الأعلى إلى الأسفل. 


العناصر الرئيسة للنص المتشعب: 
النص المتشعب يتكون من ثلاثة عناصر رئيسية: 
1 - قاعدة بيانات بالنصء وتسمى الغقد أو الكتل Nodes‏ ويمكن لهذه العقد أن تحوي كلمة أو 
صورة» أو مقطعاً موسيقياًء وتمثّل هذه العقد في النص المتشعب بأسلوبين مختلفين: 
« الأول: نظم النص المتشعب المبني على aà, :Frame-Based LYI‏ يتم تمثيل 
أجزاء المعلومات في أطر فردية» واتباغ إحدى الوصلات سينقل المستخدم من إطار 
على الشاشة إلى إطار جديد يُعرض على الشاشة قد يكون في نوافذ متعددة. 
٠‏ الثاني: نظم النص المتشعب المبني على اللف 5010/1100-83560: وفيه يتم تمثيل 
المعلومات غير المتتابعة» ويُستدل عليها من خلال أزرار داخل النصء وعندما يجري 
تصفحها يتم لف النص إلى الأعلى أو الأسفلء أو إلى اليمين أو اليسار. 
2- شبكة الدلالة اللفظية» الروابط 1015ا: وتقود هذه الروابط إلى مجموعة متنوعة من الموضوعات 


dal‏ والضشحاك» وين اذكان :الزوايط: PNY‏ ,الضرر GA) CLA‏ وشباعة. هة 
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الروابط في تسهيل البحث والوصول إلى المعلومات» كما تساعد في الحصول على خلفيات 
3- أدوات إيجاد الوصلات: 8010075: ويمكن أن تكون كلمة أو أيقونة» أو أي رسومات تعد مصدراً 


لر ت د الغ اها 


نظرية النص المتشعب: 
نظراً لأهمية النص المتشعب وعلاقته الوطيدة مع المصمم والكاتب والمستخدم» فقد توصل الباحثون إلى 
وضع نظرية النص المتشعب التي تؤطر وترسم طبيعة هذه العلاقة» وتبحث في مدى إفادة كل طرف في 
العلاقة السابقة من هذا النص» وتطرح هذه النظرية العديد من الأفكار منها: 
1- يساعد النص المتشعب القارئ بوضع نفسه في الحياة الواقعية عند التصفح» وأن يحكم على 
الأشياء والأفكار من خلال ما يقدم له من معلومات» وليس من وجهة نظر المحرر. 
2- يشجع القارئ على استخدام وتطوير مهاراته وخبراته ومعارفه السابقة لتقوده خلال النص 
المتشعب» وليس بناءً على تنظيم الكاتب للنص. 
3- لا يسلك المستخدمون المسلك نفسّه في النصوص المتشعبة» مما يؤدي إلى اختلاف فهمهم 
للنصوص المعروضة. 
4- يمكن للمستخدمين في بعض تطبيقات الصحف الإلكترونية كالمنتديات وضع روابطهم 
الخاصة»ء ومعلوماتهم الخاصةء مما يجعلهم مشاركين أكثر في هذه الوسائل. 
5- لا يضطر الكاتب إلى طرح كل معلوماته في النص المعروض» فالروابط والوصلات ستحمل 
للمستخدم هذه المعلومات. 
6-لا يضطر الكاتب إلى سلسلة معلوماته في ترتيب محددء بداية ووسط ونهايةء فالمستخدم لن 
يسلك هذا الترتيب» ويقتصر دور الكاتب على ترتيب الروابط التي يمكن أن يسلكها 
المستخدم. 
7-لا يظهر الكاتب في النص المتشعب» بل يجب أن يموت نظرياً» ليعطي المستخدم حرية 
اختيار المسارات والمعلومات التي يطلبها. 
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أنواع النص المتشعب: 
يتعلق النص المتشعب في بنائه الشكلي بالإخراج» Ud‏ في بنائه الدلالي فإنه يتعلق بالمضمون وبفن 
الكتابة» ويهتم المصمم أو المخرج بكلا الجانبين» ويراعي ألا يفقد المستخدم ويتحول إلى موقع آخرء 
ويمكن تقسيم النص المتشعب إلى مجموعة من الأشكال والأنواع التي تلبي باختلاف خصائصها وميزاتها 
حاجات المستخدمين وتفضيلاتهم: 
1- النص المتشعب الداخلي: وهو النص الذي يقود المستخدم إلى الصفحات الداخلية في الموقع 
نفسه بناءً على العناوين الواضحة أمامه. 
2- النص المتشعب الخارجي: وهو النص الذي يقود المستخدم إلى مواقع أخرى» إضافة إلى الموقع 
نفسه للاستزادة من المعلومات الإضافية أو ذات الصلة. 
3- النص المتشعب المحلي: وهو النص الذي يسمح للمستخدم التنقل داخل الصفحة نفسها. 
4- النص المتشعب والقوى الفاعلة: وهو النص الذي يحيل المستخدم إلى قوى فاعلة في coal‏ 
سياسيون؛ فنانون» رياضيونء وغيرهم.., وهذا النوع من النصوص يودّق العلاقة بين المستخدم 
والشخصيات الفاعلة» والتي يحب المستخدم الاستزادة من معلوماتهم وخبراتهم. 


5- النص المتشعب والقائم بالاتصال: ويربط هذا النص المستخدمَ مع المحرر عبر النص. 


معايير تصميم النص المتشعب: 
iade‏ 3 
Š 1‏ . کے ا س =e‏ 


في الصحيفة أو الموقع الإلكتروني» وتتلخص هذه Re TN‏ 
Sei = Fe‏ . 


المعايير فى: 











1-مراعاة كثرة استخدام النص من قبل 
المستخدمين. N)‏ 


2- مراعاة توافر نسخ إلكترونية للنص المتشعب. 
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اة ن ال ال تصن نسب وخا ligt Ah‏ 
4- تحديد الملامح البنائية للنص المتشعب» ومراعاة تميز مكوناته. 


كفي نية ` teow‏ : * تغيد ب ۰ be‏ عند č a.‏ تغيد 37 ۰ sae $e‏ ير. 


205 


خاتمه: 
شكلت العناصر التكنولوجية» والمتمثلة في عناصر الوسائط المتعددة من صور ورسوم متحركة ومقاطع 
فيديو ومقاطع صوتية ونصوص تشعبية» التطورٌ الأكثر فعالية في تصميم المواقع والصحف الإلكترونية؛ 
وشكلت إضافة كبيرة للعناصر التقليدية المستخدمة في التصميم» فقد أضفت الرسوم المتحركة على 
التصميم الطابع الجمالي الجذاب الذي يثير الاهتمام والانتباه» كما قربت مقاطع الفيديو والمقاطع الصوتية 
الأحداثت من المستخدمء وجعلتها أكثر واقعية» وساهمت في تفسيرها بشكل أكبرء أما النص المتشعب فقد 
ساعد المحرر على التحرر من أسر الأسلوب الخطي في الكتابة» وعزز من مشاركة المستخدم مع النص 
والمحرر والصحفيء وقدم له معلومات أكثرء وخلفيات معرفية أكبرء فالتزاوج بين العناصر التكنولوجية 
والعناصر التقليدية يساعد المصمم على تنويع عناصره والاستفادة منهاء ومن الإمكانيات التي أوجدتها 
بيئة الإنترنت للوصول إلى التصميم المثالي الذي يجذب المستخدم ويلبي جميع احتياجاته الاتصالية 
والإعلامية. 
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a 


الخلاصه 


قامت الوسائط المتعددة على فكرة جمع النصوص والرسوم والصور الثابتة والمتحركة بالأصوات 
والتأثيرات المختلفة لحمل وتوصيل المعاني والأفكار أو لتأكيدها للمستخدم» واستطاعت الوسائط المتعددة 
وبفضل ما تتوافر فيها من سمات وخصائص تفاعلية أن تحسن الاتصال» وتثري المواد المقدمة عبرهاء 
ويؤكد الباحثون على أهمية كل عنصر من هذه العناصر في توفير بيئة متميزة تساعد مستخدمي 


الإنترنت عموماً على اكتساب المهارات والخبرات والمعرفة. 


فالرسوم المتحركة وعلى الرغم من ندرة استخدامها في الرسائل الإعلامية الإخبارية تساعد على جذب 
الانتباه» واعطاء الموقع والصحيفة الإلكترونية الشكل المميز والهوية البصرية» كما تعمل المقاطع 
الصوتية على إضفاء الإحساس بالأحداث والأماكن» وتحسين العملية التفاعلية» وجذب الانتباه» وهو ما 
تقوم به مقاطع الفيديو بالرغم من محاذير استخدامها بكثرة من قبل المصممينء إذ إنها كبيرة الحجم, 
وتبطئ من سرعة تحميل الموقع أو الصحيفة الإلكترونية» ويقوم النص المتشعب أو الفائق بما يحمله من 
روابط ووصلات بإحالة المستخدم إلى خلفيات أخرى وكثيرة من المواقع والموضوعات» ويعطي للصحيفة 
الالقتروفية late.)‏ أكر من .حيث. الساحاتك المشخصنة لعركن: المواذ gabad‏ الأعلاسة كما 
يحرر الصحفي أو المحرر من أسر الكتابة الخطية والواسعة التفاصيلء والأهم أنه يعطي للمستخدم حرية 
اختيار الرابط أو المسلك الذي يريده ويحقق حاجاته. 


هذه العناصر التكنولوجية مع العناصر التقليدية التيبوغرافية والغرافيكية هي العناصر البنائية التي 
يستخدمها المصمم في بناء وتكوين الصحيفة أو الموقع الإلكتروني الذي يحقق يسر الاستخدام لهم 
ويحقق الوصول إلى المحتوى المعلوماتي المطلوب 
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اختر الإجابة الصحيحة: 


1. ليس من أنواع النص المتشعب: 
A‏ النص المتشعب الداخلي. 

8. النص المتشعب الخارجي. 

©. النص المتشعب والقوى الفاعلة. 
0. النص المتشعب والقارئ. 


الإجابة الصحيحة: ما النص المتشعب والقارئ 


. من معايير استخدام ملفات الفيديو: 

. يجب أن تكون ملفات الفيديو كبيرة الحجم حتى تقدم معلومات أكثر. 
. يجب أن تقدم مع الموضوعات المتكررة. 

. يجب أن تتمتع بالجودة المرئية» ولا يشوبها التشويش. 

. كل ما سبق صحيح. 

. الإجابة © فقط صحيحة 


m o O W > دم‎ 


الإجابة الصحيحة: ع الإجابة © فقط صحيحة 
كنيلك الستتضرن: انلك ننه فى Cattell Gage)‏ ها بي ال أا قيفي 
للنصوص المعروضة. 
A‏ صح 


8. خطأ 


الإجابة الصحيحة: 8 خطأ 
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Apple Spå kipsh Quick Time 1) Gul .4‏ لكي تتوافق مع أجهزتها المعروفة ال 
.Macintosh‏ 
۸. صح 
ibs .B‏ 


الإجابة الصحيحة: ۸ صح 
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